Clearfix

floatした要素を解除する際、その都度floatを解除するための空divをソースにいれたり、CSSでcloar:bothを多用していたりしませんか？
（<br class=”clear” />や<div class=”clear”></div>等）
実は、「clearFix」を使うことで、簡単にfloatを解除させることができます。


HTML

<div id="main" class="clearFix">

<div class="left">左に寄せた要素</div>

<div class="right">右に寄せた要素</div>

</div>

（IE6,IE7,Firefox 2,Firefox 3,Safari3,Opera9.6で確認済）

CSS

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}