CSSのclearfix問題を解決する

cssでネストしたdiv要素をfloatさせたばあい、子要素が親要素を突き破る問題を解決する。
（これいついては以下の記事などが詳しい）

http://archiva.jp/web/html-css/clearfix.html
http://norisfactory.com/stylesheetlab/000038.php

今までずっとこの問題に苦しんできたので音速でメモしておく。
cssのclearをよく理解していなかったのがすべての現況なのだけど…。
解決策は簡単。以下のcssクラス.clearfixを子要素をもつfloat divに追加するだけ。

css

* html .clearfix {
    display: inline-block;
}
.clearfix:after {
    clear: both;
    display: block;
    height: 0;
    content: " ";
    visibility: hidden;
}