回り込みを解除する -ClearFix-

通常、回り込みの解除には

<br clear="all" />

を使います。 しかし、上記の場合不要な改行が入ってしまいます。 それならばと、

<div class="clear"></div>

といった具合に、ボックスにclearプロパティを指定して回り込みを解除します。
ですが空のボックスは文法上よろしくない。 そこで登場するのがこのClearFix。
:after擬似要素でclearプロパティを指定した不可視ボックスを利用するというもの。

/* Start. Clearfix */
.box:after {
	clear: both;
	content: ".";
	display: block;
	font-size: 0.1em;
	height: 0;
	line-height: 0;
	visibility: hidden;
}
.box {
	display: inline-block;
	min-height: 1%;
}
* html .box {
	height: 1%;
}
.box {
	display: block;
}
/* End. Clearfix */

追記：2012/3/2 新しいClearfixが考案されたようです。

div#hoge:before,
div#hoge:after {
	content: "";
	display: table;
}
div#hoge:after {
	clear: both;
}
div#hoge {
	zoom: 1;
}