ブロックレベル要素の子要素にclearプロパティを用いて回り込みを抑制したフロートがあるとき、ブロックレベル要素の上下に空行が発生する場合がある。
- Category: Internet Explorer, Windows, ver.6, ver.6 Under
- Tag: clear, float
例示
<style type="text/css">
<!--
p.f {
float: left;
clear: left;
width: 5em;
margin: 0;
border: 2px solid red;
text-indent: 0;
}
div {
margin: 0;
}
-->
</style>
<p class="f">フロート</p>
<div>
<p class="f">フロート</p>
</div>
<p class="f">フロート</p>フロート
フロート
フロート
p要素をフロートにしています。ただし、p要素やdiv要素に上下マージンはありません。
スクリーンショット
Netscape7.1標準モード
WinIE6.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で不具合の発生を確認しました。
