floatした際の背景表示

このエントリーをはてなブックマークに追加

親ボックスに背景を設定して、内包する子ボックスに対して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が間違ってる、Firefoxが正しいと説明してきましたが、実はFirefoxのこの表示も仕様に準拠していない形になります。

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

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

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

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

スポンサードリンク