techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

後ろの要素に依存しないfloat解除(clearfix)

2012/07/06 HTML+CSS

floatを使って要素を左右に振り分けるとき、普通は、その次の要素にclear:both;を使い、float解除を行いますが、親要素でfloat解除することもできます。

クリアフィクスと呼ばれる手法で、以下のCSSを親要素にあてることにより、float解除できます。

.clearfix:after{
    content: "";
    display: block;
    clear: both;}

:afterはCSSで任意の文字を要素のあとに表示できる疑似要素です。
この:afterを使って、親要素のあと、つまりはfloat要素のあとに空白を置き、それをブロック化した上で、clear:both;をかけています。

ただ、IE7では、:afterがききません。
その対策としてはzoomというIE独自のプロパティにより解決できます。
(*zoomは要素の拡大縮小ができるプロパティ)

.clearfix {zoom:1;}
.clearfix:after {
    content: "";
    display: block;
    clear: both;}

float要素を

<div class="clearfix"></div>

で囲み
上記CSSを設定します。
*clearfixの文字列は任意です。

これにより、後ろの要素に依存せずにfloat解除ができます。