フロートボックスの親要素 カラム落ち対策

前回フロートボックスの入った親要素のあれこれで悶え苦しんでましたが対策みつけました。


▼とりあえずボックス二つ用意する。


・ソース



▼フロートを使って横並びにする





#contentsは、floatによって高さを失うのでそれに伴って親要素の高さもなくなる。

■対策
▼フロートボックスの最後にフロートを解除するボックスを入れる





事あるごとに.clearボックスをいれなくてはならずスマートでない。

▼.clearfix　というテクニックをつかう。
　仕組みは、親要素の直後に擬似要素の:afterを生成してそいつにfloatを解除させるというもの。






わかりやすくて｡ﾟ+.(*｀･∀･´*)ﾟ+.ﾟいい！