clearfixってどんなもの?
CSSでコーディングしているときに、背景や線が途中で消えたり、floatした親要素の下マージンがおかしくなることがあると思います。
これは、floatした要素が親要素の高さに反映されていないため起きる現象です。
clearfixはこういった現象を解決するための方法です。
clearfixのやり方
スタイルシートでclearfix用のクラススタイルを用意します。
01 | .clearfix:after { |
02 | height: 0; |
03 | visibility: hidden; |
04 | content: "." ; |
05 | display: block; |
06 | clear: both; |
07 | } |
08 |
09 | * html .clearfix { |
10 | zoom: 100%; |
11 | } |
12 |
13 | *+html .clearfix { |
14 | zoom: 100%; |
15 | } |
IEは疑似要素の :after をサポートしていないため、IE独自拡張の zoom を指定して解決しています。IE独自拡張のため .clearfix { zoom: 100% }としても問題はありませんが、何か気持ち悪いためCSSハックを使って指定しています。
後は、このスタイルをfloatした要素の親要素に指定するだけで完了です。
01 | .box:after { |
02 | height: 0; |
03 | visibility: hidden; |
04 | content: "." ; |
05 | display: block; |
06 | clear: both; |
07 | } |
08 |
09 | * html .box { |
10 | zoom: 100%; |
11 | } |
12 |
13 | *+html .box { |
14 | zoom: 100%; |
15 | } |
clearfix以外の解決方法
clearfix以外にもoverflow: hiddenを使って解決する方法があります。
01 | .overflow:after { |
02 | overflow: hidden; |
03 | } |
04 |
05 | * html .overflow { |
06 | zoom: 100%; |
07 | } |
08 |
09 | *+html .overflow { |
10 | zoom: 100%; |
11 | } |
疑似要素の :after の代りに overflow: hidden を使用しています。