フロートに後続するボックスの幅がフロートに合わせて短縮される

症状

フロートに後続する要素に幅か高さが指定されているとき、その要素の幅はフロートの幅を確保するように短縮される。また、フロートと後続要素の間に無くすことができない隙間ができる。

例示

<div style="float:left; width:50px; height:50px; border:2px solid blue;"></div>
<div style="height:25px; border:2px solid red;"></div>

フロートに後続する要素のボックスは左端がフロートの陰になります。

スクリーンショット

Moz1.0Mozilla1.0標準モード

WinIE6WinIE6.0標準モード

補足

この不具合のために幅が短縮された要素の内部にあるフロートでは、その要素の外部にあるフロートに対してclearプロパティが効きません。以下の例で背景が空色のフロートは青色ボーダーのフロートの下に置かれるはずですが、WinIEでは赤色ボーダーのボックスの内容領域の左上端、つまり青色ボーダーのフロートの右に置かれます。

<div style="float:left; width:3em; height:3em; border:2px solid blue;"></div>
<div style="height:1.5em; border:2px solid red;">
<div style="float:left; clear:left; width:5em; background:aqua;">フロート</div>
</div>
フロート

修正状況

WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。

関連記事

スポンサーリンク

<演算子 小さい

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る