float時に背景が消える

前回から1ヶ月経ちそうなので更新^^;
今回は、Firefoxでボックスをfloatさせた時に背景が表示されなくなるケースをご紹介。

最近はほとんどの人がCSSを使ってウェブサイトを作成していることと思います。
CSSを使っているということはfloat（フロート）も多用しているでしょう。
そんな時、指定したはずの背景が表示されない、ということはありませんでしたか？
その原因はもちろんfloatです。

例を挙げて説明しますと、まず下のように大枠のボックスがあり、その中に
ボックスが２つある場合です。

サンプル

この中のボックスをfloatすると、、、

サンプル

背景が消えます。
理由は中のボックスがfloat（浮遊）しているため、大枠ボックスの中身がないものと
判断しているためです。
これを回避するためには大枠ボックスのスタイルに、heightを指定する方法が
確実ですが、中身が増えた時にいちいち指定するのは面倒です。
なので、overflow:hidden;を使います。

サンプル

これで表示されるようになったと思います。
原理はよくわかりませんが^^;
ちなみにIE6ではoverflowが効かないようなので、代わりにwidth:100%;を指定
してあげると表示されるようになります。