floatするボックスを含む親ボックスの背景表示
floatプロパティを用いて段組をしたときに、Internet Explorer以外のブラウザだと親ボックスの背景色や背景画像、borderが途切れることがあります（サンプルHTML）。
これは作成者の立場からするとIEの挙動がありがたいのですが、CSSの仕様を見るとfloatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまうと言うのが正しい挙動のようです。
親ボックスの背景を表示させるための一工夫
親ボックスの背景を表示させるには以下の方法があります。
- 親ボックスの幅を指定する
- 親ボックスの高さを指定する
- 親ボックスにvisible以外のoverflowを指定する
- 親ボックスの最後に完全な「クリアされた」要素を置く
1.の方法ではIEだけしか背景を表示することが出来ません。
2.の方法は文字サイズを変えたりコンテンツの内容量が変動することを考えるとあまり現実的な方法とはいえません。
3.の方法ではoverflow: scrollではスクロールバーが出てしまい、overflow: hiddenではNetscape7.1で内容が表示されない（バグ）、overflow: autoではMacIE5でスクロールバーが出るようです。
4.の方法は現在では最も一般的な手法です。親ボックスの最後に<div style="clear: both;"></div>や<br style="clear: both;" />を追加すると最後の要素がフロートしないので親ボックスはそれを囲まなければならなくなり、下端まで引き伸ばされます。しかしクリアするためだけの空divやbrをHTMLに追加するというのは文書構造とレイアウトの分離を目的としたCSSレイアウトでは本末転倒ともいえます。
HTMLへの追加なしでフロートをクリアする-clearfix
HTMLにクリアするためだけの要素を追加するのではなくCSSの記述によってフロートをクリアする方法を「clearfix」と言います。
適用するHTML例
<div class="container"> <div class="main">本文本文本文</div> <div class="sub">本文本文本文</div> </div>
clearfixのCSS記述例
.container {
display: inline-table;/* MACのIE向け */
/* \*/ display: block;/* *//* MACのIE以外にdisplay: block;を上書き */
min-height: 1px;/* IE7向けに親ボックスの最小高さを指定 */
}
/* IE6以下にはスターハックを使い親ボックスの高さを指定 */
/* MACのIEには以下の内容を適用しない \*/
* html .container {
height: 1%;
}
/* MACのIEには以上の内容を適用しない */
/* IE以外のモダンブラウザ向け */
.container:after {
content: ".";/*ピリオド（.）を生成*/
display: block;/*clearを効かせるためピリオドをブロック要素に見せる*/
visibility: hidden;/*ピリオドを隠す*/
height: 0;/*ピリオドの高さをなくす*/
line-height: 0;/*ピリオドの行間をなくす*/
clear: both;/*クリアする*/
}
- 親ボックスにMACのIE向けにdisplay: inline-table;を指定。
- MACのIE以外のブラウザ向けにdisplay:block;を上書き（MACのIEは「\」直後のコメント終了タグを無視するので、間のCSSの記述は最終行のコメント終了タグまでコメント扱いになり無視される）。
- IE7は:after擬似要素に対応していないので親ボックスの最小高さ「min-height」を指定する
- IE6はmin-heightに対応していないので高さ「height」を指定する（スターハックはIE7で無視され、IE6以下では内容の高さがheightの指定値を超えても勝手に高さが引き伸ばされるバグがある）
- IE以外のモダンブラウザ向けに:after擬似要素でクリアする要素を親ボックスの内容の直後に挿入
ちょっとややこしいですが上記のようなCSSでフロートするボックスを内包する親ボックスの背景を表示することが出来ます。
因みにセレクタを「.clearfix」などにして使いまわす人もいるようですが、それだとHTMLにclass="clearfix"を追加しなくてはならず、<div style="clear: both;"></div>や<br style="clear: both;" />を追加するのとさほど意味合いが変わらなくなるのでフロートをクリアさせたい親ボックスに指定してやる方法をお勧めします。
フロートクリアさせたいボックスが増えた場合は
.container, .container2 {
～～
}
のようにカンマ区切りでセレクタをまとめることが出来ます。
clearfixが本当に必要か？
上記のようにややこしいCSSが本当に必要かどうかはサイト作成者がどの範囲までのブラウザで意図通りに表示させたいかによります。MACのIEやNetscapeなど、サポートが終了したブラウザやバージョンが旧いブラウザを切り捨てるのならば、overflow: auto;を親ボックスに指定するのが一番スマートな方法かもしれません。
または下図のような構成にして、
.footer {
clear: both;
}
とするのが直感的で一番わかりやすいかもしれません。