clearfix
要素の回り込みを解除

2007/6/9

要素をfloatさせた場合、回り込みを解除するのに、解除する位置で<br clear='all'>のようにbr要素を記述したり、解除する位置の下にある要素にdiv.footer { clear:both; }のように回り込みを解除するためのタグやスタイルを別途指定する必要がありました。

clearfixと呼ばれる手法を使って、回り込み解除のスタイルをクラス化しておくと、何度も使いまわせますし、記述もスマートです。（※必ずしもクラス化する必要はなく、各セレクタに直接記述してもOKです）

clearfixは、回り込みをする要素の親要素にあたるブロックに指定します。 以下の例では、親要素（div要素）にclearfixをクラス指定しています。 その子要素（p要素）をfloat:leftで左寄せし、それ以降のテキストを回り込ませています。

親要素にclearfixを指定しているので、親要素の次のブロックは回り込みません。

IEは、擬似要素:afterをサポートしていないので、 IE独自のプロパティzoomを併せて指定しておきます。

clearfixを使用しない従来の方法

<style type="text/css">
	p.photo {
		float:left;
		margin:0 10px 0 0;
	}
	br.clr {
		clear:both;
	}
</style>
<!-- 親要素 [start] -->
<div style="background:yellow;">
	<p class="photo"><img src="/content/img/pic1-thumb.png" alt="写真"  /></p>
	<p>
		サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
		<br class="clr" />
	</p>
</div>
<!-- 親要素 [end] // -->

<p>ここは回り込みませんよ。</p>

clearfix使用

<style type="text/css">
	.photo {
		float:left;
		margin:0 10px 0 0;
	}
	.cf:after {
		content:".";
		display:block;
		visibility:hidden;
		height:0.1px;
		font-size:0.1em;
		line-height:0;
		clear:both;
	}
	.cf {
		display:inline-block;
	}
	/* Hides from IE-mac \*/
	* html .cf {
		height:1%;
	}
	.cf {
		display:block;
	}
	/* End hide from IE-mac */
</style>

<!-- 親要素 [start] -->
<div class="cf" style="background:yellow;">
	<!-- 子要素 p + img -->
	<p class="photo"><img src="/content/img/pic1-thumb.png" alt="写真" /></p>
	<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>
<!-- 親要素 [end] // -->

<p>ここは回り込みませんよ。</p>