floatしたdivが親要素からはみ出る？そんな時は「clearfix」で解決だｯ！

CSS初心者の頃にハマったので、解決策を載せておきます。 CSSでレイアウトをする際によく使われる「float」
今でこそ普通に扱えるようになりましたが、初心者の頃はかなり苦戦した記憶があります。floatの挙動を理解するのはなかなか難しいですが、特に悩まされたのが「親要素からはみ出てしまう」という点です。
floatされたブロック要素は、floatを解除しない限り内部的に高さ（height）を失ってしまいます。見た目は変わらないんですけどね。

どういう現象かお見せするために、サンプルを用意してみました。

親要素を貫くdiv

先程も言った通り、左右のboxはfloatを解除していないため高さが0と認識されています。
そのためブロック要素を内包している親要素（container）は高さが自動的に変化せず、結果的に左右のboxが親要素を貫く形になってしまいます。

念のためソースも載せておきますね。

float解除のためのboxを入れてみる

float解除用のbox（footer）を入れると、左右のboxの高さが反映されたので全体がしっかりとカバーされました。 ただ、毎回毎回float解除のためにboxを用意するのもめんどうなので、次に説明する「clearfix」という技を使いましょう。

clearfixを使ってfloatを解除してみる

clearfixというのは、floatを解除するために考案されたCSSのテクニックです。
とりあえずソースを見てください。 親要素となるcontainerと一緒にclearfixを記述し、親要素の直後（after）に擬似要素を生成。そしてその擬似要素にfloatの解除をさせるわけです。
このclearfixを使えば、わざわざfloat解除の為だけにboxを配置する必要もないのでレイアウトはスッキリ、コードもスマートになります。

もう一つの手段、overflow:hidden;

どういう理屈かはイマイチ分からないんですが、親要素に「overflow:hidden;」を指定するとfloatが解除されます。謎です。でもしっかり表示されてます。よく分かりません。
個人的によく分からないものは使いたくないので、やっぱりclearfixが安定ですね…