便利で簡単、floatの解除が必要の無い便利なclearfixコード

要素を横に並べる場合、floatを使って並べていくのですが、
floatを使った要素はをれを囲む要素から高さが認識されないために以下のような現象が起こってしまいます。

そのため、一番外側の要素に背景を指定した場合など、
うまく背景が表示されないという現象が起こってしまいます。
それを回避するために、要素の最後にclear属性を持った要素を配置して、
最後の要素でfloatを解除して、位置を知らせなければなりませんでした。

この、最後にfloatを解除するコードが必要なため、HTMLとして余分なコードが必要でしたが、
今回紹介するclearfixを使うと、このコードを書かずともCSSでこの現象を回避することが出来るのです。
SEO上も、HTMLの構成は出来るだけシンプルなほうがいい。
※SEO上は微々たるものですが、HTMLをできるだけ解析しやすくしておく方が検索エンジンにもやさしいページになります
使い方は簡単、以下のコードをコピーして使うだけ。
CSSファイルで定義しておくと、いつでも簡単に使えます。

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

使い方は、一番外側の要素（図の場合ピンクの要素）に.cfを指定するだけ。
うれしいのはIE6にも対応しているところ。
簡単で便利なclearfixを今すぐ使ってみましょう。

利用例（デモページ）

<div class="cf">
<div class="section">Float</div>
<div class="section">Float</div>
</div>

A new micro clearfix hack