floatバグ対策

Wednesday, Sep 14, 2005 - 19:19 +09:00

※この記事は追記・編集して新サイトへ移行されています。

floatボックスが親ボックスを貫通して表示される問題について。

box_A
box_B

親ボックスの中に「float:left;」（box_A）と「float:right;」（box_B）がある。OperaやFirefoxで見てみよう。判りやすいように親ボックスには padding を指定してあるが、親ボックスが中身（floatボックス）に合わせて伸びてくれないことが判る。

<div style="width:140px; padding: 10px; border:1px solid #666;">
<div style="float: left; width: 70px; height: 100px; background: #222; border:1px solid #999;">box_A</div>
<div style="float: right; width: 50px; height: 50px; background: #222; border:1px solid #999;">box_B</div>
</div>

バグとは書いたがCSSの仕様であり、CSSを正しく解釈するブラウザであれば正しい表示です。とはいえ、たとえば親ボックスに背景を指定している場合などには、非常に困る。一番簡単な解決策は、親ボックスの中でfloatボックスの後に、clearを指定したボックスを入れること。

box_A
box_B

clear: both;を指定

このように、floatボックスの後にfloatでないボックスがあれば、非floatボックスの範囲まで親ボックスは伸びてくれる。ただし上の例のように clear:both; を指定していないと、非floatボックスが右か左かに回りこんでしまい、そこまでしか親ボックスが伸びてくれない。より確実を期すなら(2つのfloatボックスに親ボックスの背景を表示させたいなら)、clear:both; が必要となるわけだ。

とはいえ、大人の事情で親ボックスにclearボックスを置けない場合もある。その場合はCSS側で次のように指定する。

#main:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
#main {
	display: inline-table; 
	_height: 1%; 
	/* \*/	display: block; /* */ 
}

こうすれば親ボックスにclearボックスを入れずとも、親ボックスをfloatボックスの高さに合わせて拡張することができる。この場でのプレビューはメンドイので割愛。さすがに職場からじゃ無理さっ！

posted in HTML/CSS | Comment (1) | Trackback (0)

1 Comments

1. Sig. / June 13, 2006 at 12:33

巧く使えば、IE-macのfloat問題も解決できる模様。
（親ボックスでclear指定してると、子ボックスで同方向のfloatが効かない）

ただし、Safariで指定部位のa:hover周りが「もたつく」ようになる。
場合によりけり。悩ましいところ。

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/63

« Previous Entry - Next Entry »