clearを指定したフロートの上下に空行ができる

症状

ブロックレベル要素の子要素にclearプロパティを用いて回り込みを抑制したフロートがあるとき、ブロックレベル要素の上下に空行が発生する場合がある。

例示

<style type="text/css">
p.f {
  float: left;
  clear: left;
  width: 5em;
  margin: 0;
  border: 2px solid red;
}
div {
  margin: 0;
}
</style>

<p class="f">フロート</p>
<div><p class="f">フロート</p></div>
<p class="f">フロート</p>

フロート

フロート

フロート

p要素をフロートにしています。ただし、p要素やdiv要素に上下マージンはありません。

スクリーンショット

Ns7.1Netscape7.1標準モード

WinIE6.0WinIE6.0標準モード

補足

不具合が発生している要素の親要素がli要素の場合やボーダーがあるボックスである場合にこの不具合は発生しません。

<ul><li>
<p class="f">フロート</p>
<div><p class="f">フロート</p></div>
<p class="f">フロート</p>
</li></ul>
  • フロート

    フロート

    フロート

不具合が発生している要素の親要素に上パディングを指定することでこの不具合を回避することができます。

<p class="f">フロート</p>
<div style="padding-top:1px;">
<p class="f">フロート</p></div>
<p class="f">フロート</p>

フロート

フロート

フロート

修正状況

WinIE6.0で不具合の発生を確認しました。

WinIE7でも発生します。

スポンサーリンク

関連記事

スポンサーリンク

ImageMagick更新で『PHP Startup: Unable to load dynamic library '/usr/lib/php/modules/imagick.so'』エラーが出る場合

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

上に戻る