floatさせた要素を簡単にfloat解除させる「clearFix」

CSS2008年12月6日

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

HTML

<div id="p52_parent" class="clearFix">
<div class="left">左に寄せた要素</div>
<div class="right">右に寄せた要素</div>
</div>

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

CSS

.clearFix:after{
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
zoom:1;
}

#p52_parent{
width:97%;
margin:10px 0;
padding:5px;
border:1px solid #ccc;
}
#p52_parent .left,#p52_parent .right{
width:48%;
border:1px solid #9bc3d5;
}
#p52_parent .left{
float:left;
}
#p52_parent .right{
float:right;
}

解説

何をやっているかというと、afterの疑似要素とcontentプロパティで新たなボックスを生成し、これにclear:bothを適用させています。
(本来IE6・IE7はafterは未対応であるが、height:0を指定することでこのclearFixの高さも算出される)
ちなみに、zoom:1;はIE7にも適用させるためのハックです。この手法の最大のメリットは、HTMLに無意味な要素を入れずに使うことができ、(class="clearFix"と書くだけ)上記のCSSだけを書いておけば、繰り返し使用することができるので、CSSも軽くなります。
このテクニックを使うだけで、コーディングが死ぬほど楽になります。

参考:コリス

• 角丸背景を画像1枚で実装
• CSSのデバッグ方法

この記事を読んでいる方にオススメの記事

• CSSデフォルトで記述しておくと便利なCSS(スタイルシート)
• CSSCSSのコーディングで陥りがちなミスやトラブル
• CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
• CSS強制的にCSSを適用させる!importantハック
• CSSCSSのみでlightboxを実装
• CSS画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。