低価格・高品質・最速のHTMLコーディングはクロノドライブへ

clearfixを使ってハッピーなコーディングライフを

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 を使用しています。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ