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も軽くなります。
このテクニックを使うだけで、コーディングが死ぬほど楽になります。
参考:コリス
この記事を読んでいる方にオススメの記事
- CSSCSSのコーディングで陥りがちなミスやトラブル
- CSSCSS3でborder(ボーダー)のグラデーションを実現
- CSSbodyにfont-size100.01%を指定
- CSSfont-familyの指定
- CSS強制的にCSSを適用させる!importantハック
- CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
- ※承認制のため、即時には反映されません。
この記事にコメントする