Floatした背景が表示されなくなっちゃった＞＜

これはCSS覚えたての頃よく泣かされました。 ちょっとややこしいので今回は図をつかって説明します。

まずは背景のついた親要素の中に子要素がある場合。

こんな感じっすね。

でもでも子要素にfloatを指定すると・・・

見たまんまですが、子要素が浮き上がって、親要素がその存在を認識できないので、子要素のあるところまで背景が伸びません＞＜

ってな感じです。

これを解決するにはfloatした子要素の次要素にclearを指定して防ぎます。

結構ビギナーの頃は思ったとおりレイアウト出来なくて、次要素にclearを指定する事が多いと思いますが、これも誰もが通る道！ 慣れるまでは我慢です＾＾