clearfix の書き方

html css

clearfix クラスについて、いわゆるfloat解除。
のかわりにこれでスマートな感じになる。

.clearfix {zoom:1;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;}

<div class="clearfix">
<div style="float:left; width:100px; height:100px;">左だよ</div>
<div style="float:left; width:100px; height:200px;">右だよ</div>
</div>
<p>これはちゃんと下に表示される</p>