css - 看到红色 : How to NOT clear a div in IE7?

Question

首先，你看到红色了吗？... http://jsfiddle.net/yaBqr/

我在 IE7 中这样做，我想知道为什么。两个段落都朝相反的方向 float ，没有其他东西可能会清除容器 div。

HTML:

<div class="wrap">
    <p class="left">To the left, two, three, four</p>
    <p class="right">To the right, two, three, four</p>
</div>

CSS:

div.wrap { background: red; width: 300px; margin: 100px auto 0 auto; }
p.left { float: left; width: 100px; }
p.right { float: right; width: 100px; }

我知道你在想什么......“有什么问题？容器 div 清除段落有什么问题？”。在大多数情况下，是的，我通常会清除所有 float 元素，但我正在尝试做这样的事情:http://jsfiddle.net/yaBqr/1/

我只想清除左边的 div，这样背景就只出现在左边的段落后面。 IE7 正在清除两个 float 元素。即使没有更清晰的 div!所以我什至不能离开地面。

有什么想法吗？

Answer 1

将 width 添加到 .wrap 使其成为 hasLayout在 IE6-7 中，错误地使其 self 清除。 hasLayout 是各种常见 IE 布局错误的原因和解决方案。

您可以尝试将宽度/居中放在外部包装 div 上，并将背景放在其中没有布局的包含 div 上，以便让内部 div 的内容溢出。