float解除の方法ベスト1！

ウェブサイトのレイアウトを構築する際、必ずと言っていいほど使用する「float」ですが
使用した後は確実にfloat解除しないと意図しない形になってしまいます（レイアウト崩れ）。

解除の方法はいくつかありますが、
そのうち一番汎用性が高いものを紹介します。

.clearfix:after {
	content: ""; //疑似要素を有効化するおまじない
	display: block; //疑似要素を有効化するおまじない
	clear: both; //ここでfloat解除
}
.clearfix {
	zoom: 1; //IE8以下用の指定
}

「clearfix」というクラスの付いた要素に対してフロートを解除します。
after疑似要素を使い、そいつがclearさせます。疑似要素を使っているのでIE8以下には利きません。
代わりに、IE8以下には「zoom」というプロパティを指定してあげます。
zoomはIE独自のもので、なぜこれがfloat解除に利くのかは･･･割愛します。（キーワードは”hasLayout”）

ちなみに1例として、HTML構造はこんな想定です。
よくあるリストの構造で、liタグにfloatがleftなりrightなりがついてる感じです。

<ul class="clearfix">
	<li>AAA</li>
	<li>BBB</li>
	<li>CCC</li>
</ul>

ulタグである必要はなく、すべてdivでも機能します。
要するに、floatさせたい要素の親要素に「clearfix」を付ければよいです。

ただ、この記述だと「clearfix」というクラスを逐一追加する必要があるため、
めんどくさいと言えばめんどくさいです（主観ですが）。

そこで！

div:after,
ul:after,
ol:after {
	content: "";
	display: block;
	clear: both;
}
div,
ul,
ol {
	zoom: 1;
}

floatのレイアウトでよく使われるdivとul,ol（li）、その全てでfloat解除するように書き換えます。
これでHTML側に追記することなく、float解除が行えます。