【CSS】clearfixを使って回り込みを解除する

前回の記事（【CSS】floatを使って要素を横並びにしたい）ではfloatを使った
要素の横並びについて紹介しました。

回り込みの解除はclear:both;を指定した要素を下に置く方法をとっていましたが、
他にも「clearfix」を使った方法で解除することもできます。

CSS

.clearfix:before,
.clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

これがclearfixです。
使用法は、floatで回り込ませた要素の１つ上の要素にこのclearfixを指定するだけです。

HTML

<div id="contents" class="clearfix">
	<div id="main">
		横並びにしたいブロック１
	</div>
	<div id="side">
		横並びにしたいブロック２
	</div>
</div>

これだけで回り込みが解除されます。

clearを指定させたdivを下に用意する必要がなくなるので、ソースがすっきりしますね。