floatした際に背景が消える件【css tip】

親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。


サンプルとなるhtmlは

<div class="parent">
　親ボックス
　<div class="child">
　　子ボックス
　</div>
　<div class="child">
　　子ボックス
　</div>
</div>

とします。

これに対して

div.parent{
　width:204px;
　background:#39FF6B;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

このようなCSSを適用した場合、以下のような表示になります。
サンプル

これはIEがfloatの処理が正しく行われていない事が原因です。

floatの仕組み

floatは『回り込み』と解説される事が多い為、ブロックレベル要素を回り込ませる為のプロパティと思われがちですが実は違います。
floatはブロックレベル要素を『浮かせる』為のプロパティになります。
つまりfloat:leftはブロックレベル要素を浮かした上で親要素に対して左に寄せて配置することを意味します。

先ほどのサンプルの場合はfloatを適用された子ボックスは『浮く』ので、親ボックスは子ボックスを内包することにより確保していた高さを失うことになります。

IEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがある為、上記のように親ボックスの背景が子ボックスを内包するように表示されるわけです。

Firefoxの方が仕様に準拠しているわけですが、実際デザインする場合は、Firefoxでも親ボックスの背景が子ボックスを内包するように表示するようにします。

親ボックスに高さを指定する

もっとも簡単に対応するには親ボックスに対して高さを指定することです。

div.parent{
　width:204px;
　height:120px;
　background:#39FF6B;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

サンプル

ただし、この方法は、テキストが親ボックス内に記述されている場合はお勧めできません。
文字サイズを変更されると親ボックスの高さが変わってしまうからです。

clearを使う

これがもっとも一般的な方法です。

親ボックスの次の要素に対してclear:bothを適用することで親ボックスの背景が表示されるようになります。

サンプルのように、親ボックスの次の要素がない場合などはafter擬似クラスとcntentプロパティを使いclearを行う事ができます。

after擬似クラスとcntentプロパティはセットで使われ、適用された要素の次に『文字』を追加することができます。

div.parent{
　width:204px;
　background:#39FF6B;
}
div.parent:after {
　content: "";
　display: block;
　clear: both;
}
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

サンプル

after擬似クラスとcntentプロパティを使い""(つまり空の文字)を追加し、それをブロックレベル要素に変更してからclear:bothを適用しています。

IEはafter擬似クラスとcntentプロパティに適用していませんが、先述のバグあるためclearを行う必要がない為、問題ありません。

overflow:autoを使う

もっとも簡単な方法としては、親ボックスに対してoverflow:autoを適用することにより、子ボックスを親ボックス内に無理やり内包することが可能です。

div.parent{
　width:204px;
　overflow:auto;
　background:#39FF6B;
}
/*\*/
　* html div.parent{overflow: visible;}
/**/
div.child{
　border:1px dotted #000;
　height:100px;
　width:100px;
　float:left;
}

MacIE5.xにはoverflowにvisible以外を指定するとスクロールバーがでるというバグが存在する為、スターハックを利用してoverflowをvisibleに戻す必要もあります。

また、IEなどは親ボックスに対してwidthが指定されていない場合、対応できないのでwidthの指定が必要ない場合でもwidth:100%を追加しておくとよいでしょう。

サンプル

最後に

さんざんIEが間違ってる、Firefoxが正しいと説明してきましたが、実はFirefoxのこの表示も仕様に準拠していない形になります。

サンプルの方をOperaで見ていただいたらわかると思いますが、Operaでの表示が正しい表示になります。

Forefoxではfloatの開始位置にバグがあり

要素の浮動ボックスの外上辺は， ソース文書の中のそれ以前の要素によって生成されたボックスを包含する行ボックスの上辺より高くてはならない。

という仕様に準拠した形になるのはOperaになります。

floatした際に背景が消える件(IE編)に続く

Powered by CSS TIPS

スポンサードリンク

«IE6とIE7で検証する方法 | メイン | floatした際に背景が消える件(IE編)»