Firefoxでの回り込みと背景が伸びない現象への対処法

2006年10月4日

Fireｆoxではdivなどの中にfloatをかけた要素を入れた場合、floatを解除しないと背景が伸びなかったり、継続要素の回り込みなどの現象がおこります。

それらの対処法をいくつかご紹介します。

この記事の内容

1.HTMLのdiv要素の閉じタグの手前にfloatをクリアした要素を入れる。

※問題はないがソースが汚くなる。

<div id="container">
<img src="01.jpg" class="float_left" />
<br clear="all" />
</div>

※IEはスクロールバーがでるので控えたほうがいいかも。

div#container {
overflow:auto;
}

※現時点ではたぶんベストな方法

div#container:after {
content : "";
display : block;
height : 0;
clear : both;
}

注意点として、2番目の方法ではIEの印刷プレビューで表示崩れが起こるので
印刷用CSSを用意する必要があります。

結論として自分的に、現段階では１.3番目の方法がベストなんじゃないかと思いました。

【CSS】