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

clearfixってどんなもの？

CSSでコーディングしているときに、背景や線が途中で消えたり、floatした親要素の下マージンがおかしくなることがあると思います。

※このサンプルは、floatした要素と回り込みテキストを背景と線が指定された親要素が囲うようにCSSを書いています。

これは、floatした要素が親要素の高さに反映されていないため起きる現象です。
clearfixはこういった現象を解決するための方法です。

clearfixのやり方

スタイルシートでclearfix用のクラススタイルを用意します。

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

	* html .clearfix {
		zoom: 100%;
	}

	*+html .clearfix {
		zoom: 100%;
	}

IEは疑似要素の :after をサポートしていないため、IE独自拡張の zoom を指定して解決しています。IE独自拡張のため .clearfix { zoom: 100% }としても問題はありませんが、何か気持ち悪いためCSSハックを使って指定しています。
後は、このスタイルをfloatした要素の親要素に指定するだけで完了です。

サンプルでは、クラススタイルを作りそれをHTMLに指定していますが、親要素のスタイルに直接記入しても問題ありません。

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

	* html .box {
		zoom: 100%;
	}

	*+html .box {
		zoom: 100%;
	}

clearfix以外の解決方法

clearfix以外にもoverflow: hiddenを使って解決する方法があります。

.overflow:after {
	overflow: hidden;
}

	* html .overflow {
		zoom: 100%;
	}

	*+html .overflow {
		zoom: 100%;
	}

疑似要素の :after の変りに overflow: hidden を使用しています。

しかし、この方法では、NN7.1のバグで要素の高さが0になってしまうようです。