フロート化した要素に後続する要素のボックスが親要素のボックスからはみ出すような状況では、フロートに後続する要素のボックスはフロートボックスより下に置かれてしまう。
- Category: Internet Explorer, Windows, ver.6, ver.6 Under
- Tag: float, ボックス
例示
<div style="width:200px; border:2px dashed red;">
<div style="float:left; width:100px; border:2px solid blue;">float</div>
<div style="margin-left:110px; width:100px; border:2px solid green;">後続</div>
</div>float
後続
フロート（青色のボーダー）に後続する要素（緑色のボーダー）は、フロートの右側に置かれるはずです。
スクリーンショット
Netscape7.1標準モード
WinIE6.0標準モード
補足
上記の例示は親要素の幅を明示した場合に不具合が発生することを示しています。このほかに、フロートに後続する要素のボックスが閲覧領域からはみ出すとき（横スクロールが必要になる場合）にも同様の現象が発生します。
フロートに後続する要素の内容物がimg要素などの置換要素である場合、ボックスの位置は正しいが内容物はフロートボックスより下から始まる状態になり、内容領域の上端に空白の領域が発生します。
<div style="width:200px; border:2px dashed red;">
<div style="float:left; width:100px; border:2px solid blue;">float</div>
<div style="clear:none; margin-left:110px; border:2px solid green;">
<img src="http://css-bug.jp/img/common/img01.png" alt="" style="width:100px; height:48px;">
</div>
</div>float
修正状況
WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。
