フロートの後続フロー制御を設定したbr要素が親要素に包含されない

症状

clear: left;（またはright/both）が指定され、同世代で後続しているものがないbr要素（br要素の直後に親要素の終了タグがある場合）が親要素のボックス内に包含されない。

例示

<div style="border:2px solid red;">
<div style="float:left; width:50px; height:50px; background:aqua;">Float</div>
<br style="clear:left;">
</div>
Float

赤色の実線ボーダーが設定されたdiv要素は、br要素までを包含する（フロートのdiv要素を完全に包含する）はずです。

スクリーンショット

Moz1.0.1Moz1.0.1での表示（標準モード）

WinIE6WinIE6.0での表示（標準モード）

補足

br要素と親要素の終了タグの間に何らかの文字列や要素を置くとこの不具合を回避できます。

<div style="border:2px solid red;">
<div style="float:left; width:50px; height:50px; background:aqua;">Float</div>
<br style="clear:left;">Clear
</div>
Float

Clear

親要素のwidthプロパティやheightプロパティの値を明示することでも不具合を回避することができますが、WinIE5.0ではこの対策を施したボックスの後方にフロートがある場合に『サイズの大きいフロートの上に空白領域が発生する』が発生することがあります。

修正状況

WinIE6.0では標準・互換モードともに不具合の発生が確認されました。

WinIE7でも発生します。

関連記事

スポンサーリンク

新潟県の電車路線、駅の一覧

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

上に戻る