clearを指定した要素ではフロートに対して上マージンを設置する

症状

clearプロパティによってフロートとの隣接を抑制した要素に上マージンを指定すると、フロートの下に指定値分の幅の上マージンを設置する。

例示

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

フロートの高さが3emであるのに対し、後続のdiv要素の上マージンの指定値が1emしかないので、フロートの下端と後続要素のボーダー上端は接するはずです。

スクリーンショット

Ns7.1Netscape7.1標準モード

Op7.2Opera7.23標準モード

補足

clearプロパティの「フロートに後続する要素のボックスを先行するフロートに隣接させない」効果は、後続する要素の上マージンの値を調節することで実現しています。従って前出の例示の場合は、後続する要素へ実際に設置するmargin-topの値を3emに変えることでclearプロパティの効果を実現することになります。

そもそもフロートは通常フローに属していないため、位置指定されていない(position:static; である)ブロックボックスのマージンがフロートのボックスに対して設置されることはないはずです。

修正状況

Opera6.06、Opera7.23の標準モードと互換モードで不具合の発生を確認しました。

関連記事

スポンサーリンク

『Pleiades でエラーが発生しました。』の対処法

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

上に戻る