clearfixの決定版

XHTML + CSSでページをレイアウトしている場合、段落を左右に分割するのにCSSのfloatを使って、左右に寄せたりします。

単純なブログレイアウトみたいな大まかなレイアウトならば、あまり気にしませんが、従来TABLEでレイアウトしていたような、複雑なレイアウトを組もうとするとclear:both;を適当に入れてfloatを解除してあげる必要があります。

例えば、<br style="clear:both" />とか、<div style="clear:both"></div>とかなんてするんですが、BRの方は、まあまあいいかなと思うんですが、空DIVを作る方は、邪道な感じがします。

そこで、空DIVを作ることなく、floatを解除してあげようというのがclearfixというTips。

ようは、 .hogehoge:after { clear:both; } 見たいに　:after　を使って、DIVを閉じたところでfloat解除しましょうって事。
そして、各ブラウザでのレイアウトの違いを吸収してシンプルにコーディングする例が以下。

http://norisfactory.com/stylesheetlab/000038.php

CSS
floatの最後にclear:bothをつける事で、レイアウトのズレを解決するのを
CSSのみで、修正するTips

http://hato-style.chu.jp/note/note_20070614.html

MacIE 5向けの display: inline-table(inline-block) を全ブラウザに対して指定。その後同じセレクタ内で、コメントハックを使用しMacIE以外のブラウザを display: block にするようにした。

WinIE 7対応向けの指定を display: inline-block から min-height へ変更。

スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る −モダンブラウザ編−を参考にcontentプロパティを空にしてみた。よって after疑似要素の height と visibility を削除した。

IE向けのスターハックを削除。

WinIE 5〜6用に指定された height:1px 。他のモダンブラウザで正しい高さを算出させるために子供セレクタを使用して height: auto を上書き。