floatを解除させる手法「claerfix」
floatプロパティでレイアウトを組んでいると、
背景画像が途切れたり、高さが合わなくなったりする、場合があるかと思います。
そんなときに便利なのがclearfixと呼ばれる手法。
clearfixと検索すると多数出てきますが、
コリスさんで紹介されていた手法が良さそうでしたので、そちらをご紹介。
floatを解除する「clearfix」のIE6/7に対応した改良版
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
使い方はclearしたい親要素に対してclass=”clearfix”と指定します。
※なおモダンブラウザだけでもいい、といった場合はclearfixを使わずに、
親要素にoverflow:hidden;を指定すると良いようです。
