看到红色：如何在IE7中清除div？

Question

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

我在IE7中做，我想知道原因。两个段落都是相反的方向浮动，没有其他任何东西可以清除容器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清除段落有什么问题？”。在大多数情况下，是的，我通常会清除所有浮动的元素，但我正在尝试做这样的事情：http://jsfiddle.net/yaBqr/1/

我只想清除左侧div，因此背景只显示在左侧段落后面。 IE7正在清除BOTH浮动元素。即使没有更清晰的div！所以我甚至无法开始工作。

有什么想法吗？

Answer 1

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

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