親要素のマージン幅によってはclearが効かない

症状

左フロートに後続するボックスの左マージンの幅がフロートボックスの幅より大きいとき、後続するボックスの子孫ボックスではclearプロパティの指定が無視される。右フロートと後続ボックスの右マージンでも同様の現象が発生する。

例示

<div style="float:left; width:3em; height:3em; background:aqua;">Float</div>
<div style="margin-left:4em; border:2px solid red;">
<div style="clear:left; width:3em; height:3em; background:lime;">Clear</div>
</div>
Float
Clear

左マージンの幅が先行するフロートの幅より大きいボックスの内部に、clearプロパティを指定したボックスを置いています。このボックスの上辺はフロートの下辺より下方にあるはずです。

スクリーンショット

WinIE6.0WinIE6.0標準モード

Ns7.1Netscape7.1標準モード

補足

フロートに後続するボックスの左右マージンの幅がフロートの幅より小さい場合、この不具合は発生しません。以下の例はNetscape7.1でも、背景が黄緑色のボックスがフロートボックスより下方に置かれます。

<div style="float:left; width:3em; height:3em; background:aqua;">Float</div>
<div style="margin-left:2em; border:2px solid red;">
<div style="clear:left; width:3em; height:3em; background:lime;">Clear</div>
</div>
Float
Clear

修正状況

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

スポンサーリンク

関連記事

スポンサーリンク

<RP> ルビ(ふりがな)を囲む記号を指定する(IEが独自に採用)

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

上に戻る