Clearfix : css

Tweet

Pocket

内部要素に浮動ボックスを含んだ親要素のボックスは、浮動ボックスに応じて高さの拡大はしません_※1。

浮動ボックスの高さに応じて親要素のボックスを拡大するには、2つの方法があります。

• 親要素にfloat:left/rightを指定する。
• Clearfixを使う。

本記事ではClearfixについてまとめています。

※1:IE6は不具合により親要素のボックスが自動拡大されます。しかし、IE7ではこの不具合が解消されています。

Clearfixを利用しない場合

テキスト量が少ない場合

テキストは，浮動ボックス(画像1)に回り込む形で配置されます。
テキストの量が少ない場合，浮動ボックス(画像1)は親ボックス(包含ブロック)からはみ出ます。

<p style="width: 380px; padding: 10px; background-color: #CDE854">
     <img style="float: left; margin: 0 10px 10px 0; " src="画像1" alt="Clearfix" border="0">
    テキストは，浮動ボックス(画像1)に回り込む形で配置されます。テキストの量が少ない場合，浮動ボックス(画像1)は親ボックス(包含ブロック)からはみ出ます。
</p>

(2)テキスト量が多い場合

テキストは，浮動ボックス(画像1)に回り込む形で配置されます。
テキストの量が少ない場合，浮動ボックス(画像1)は親ボックス(包含ブロック)からはみ出ます。
テキストの量が十分に多くなると浮動ボックスは親ボックスをはみ出すことはありません。
テキスト量が少ない場合に，浮動ボックスが親ボックスからはみ出る配置はCSS2の正常な動作です。
IE6では不具合のため親ボックスが自動で拡張されます。IE7では自動で拡張される不具合は修正されています。

<p style="width: 380px; padding: 10px; background-color: #CDE854">
    <img style="float: left; margin: 0 10px 10px 0; " src="画像1" alt="Clearfix" border="0">
    テキストは，浮動ボックス(画像1)に回り込む形で配置されます。テキストの量が少ない場合，浮動ボックス(画像1)は親ボックス(包含ブロック)からはみ出ます。テキストの量が十分に多くなると浮動ボックスは親ボックスをはみ出すことはありません。テキスト量が少ない場合に，浮動ボックスが親ボックスからはみ出る配置はCSS2の正常な動作です。IE6では不具合のため親ボックスが自動で拡張されます。IE7では自動で拡張される不具合は修正されています。
</p>

Clearfixを利用した場合

Clearfixの指定(XHTML)

浮動ボックスの親要素にclearfixクラスを指定します。

(1)と異なりClearfixが施されているので，
浮動ボックスは親ボックスからはみ出しません。

<p class="clearfix" style="width: 380px; padding: 10px; background-color: #CDE854">
    <img  style="float: left; margin: 0 10px 10px 0; " src="画像1" alt="Clearfix" border="0">
    clearfixクラスをclass属性に指定しています。浮動ボックスは親ボックスからはみ出しません。
</p>

clearfixクラスを定義(CSS)

clearfixは下記のサイトのコードを利用させて頂きました。
»floatさせたBOXが親BOXからはみ出すのを回避する裏技のIE7対策 | i yahoo i.com:blog

その他の方法

Clearfixを使う方法の他に、浮動ボックスの親要素に対してfloat:left/rightを設定することにより、Clearfixと同様の効果を得ることができます。

参考サイト

»floatさせたBOXが親BOXからはみ出すのを回避する裏技のIE7対策 | i yahoo i.com:blog
»clearfixハック｜CSS HappyLife

Clearfixには複数の方法があるようです。以前とは別のバージョンを記載します。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }

.clearfix { display: inline-block; }

/* Hides From IE-mac */
* html .clearfix { height: 1%; }
.clearfix {display: block; }
/* End hide from IE-mac */