[CSS]float解除ハックClearFix

親要素に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