clearfixの使い方

コーディングを始めると最初に感動するのがfloatで、最初につまずくのもfloatだと思います。


親要素の中に子要素があり、複数の子要素がfloatしています。
html上は親要素は子要素を完全に包み込んでいても表示上は完全に包み込んでいないため、次の要素が来ると体裁が崩れる。

これを防ぐためには子要素としてclearプロパティを最後尾に付け足す方法があります。
これを行うと親要素の高さが子要素を内包するかたちで確定します。

しかしhtmlを変更が許されない、汚したくない場合があります。
そこで考え出されたのが擬似要素を利用した方法です。

div:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
    clear: both;
}

（IE7用に以下の設定もしておく）
div { display: inline-block; }

目に見えない:after擬似要素を付加し、そいつにclearさせるということですね。
2004年あたりに開発されたようです。考えた人はスゴイ！

overflowでも解除は可能だそうですが試したことはありません。

2011年頃からmicro clearfixというものも出てきました。こちらも勉強中です。