親要素にfloatが使えない場合の解決策として使われる超有名ハック。
これ考えた人尊敬するわ。
このハックを使う主なケース。
- margin:0 auto;で中央配置にしてるブロック要素の中でfloat指定するものを配置する
（親要素にfloat指定することが出来ない状態） - liやdt、dlにfloatかけたから手っ取り早くクリアしたい
- clear:bothとか置けない。もしくは置くのが面倒。置くと美しくない
大概は親要素にfloat指定するか、下にclear指定しとけばおｋだけど、たまにどちらも使えない場合がある。そんなときはこのハックを思い出すと幸せになれる。
使用するとIEで妙な隙間が出来る場合があるので注意。多分バグだろうけど。
div:after {
content:".";
height:0px;
clear:both;
display: block;
visibility:hidden;
}
IE7は未対応なので以下２つのうちどちらかを使う。
ただし、display:inline-blockはsafariも適用されてしまうので注意。
div { display:inline-block; }
div { zoom:100%; }
zoomはFirebug等のバリデータでエラーになる。
display:inline-block;を使うなら、Safari用にFilter使っておくといいと思います。
*+html div { display:inline-block; }
MAC IE5はどれにも対応していない。
NN7.1はOK