只清除父容器的浮动，而不是祖先元素？

Question

我有一个包含两个浮动容器的布局：

<div id="navigation" style="float: left; width: 150px; height: 200px; background-color: #eee">Navigation</div>
<div id="container" style="margin-left: 150px; background-color: #f00">
    <div style="float: left; width: 50%; height: 100px; background-color: #ff0">Block</div>
    <div style="float: left; width: 50%; height: 20px; background-color: #f0f">Block</div>
    <div style="clear: both"></div>
    <div style="float: left; width: 50%; height: 50px; background-color: #00f">This Block</div>
</div>

您可以在http://jsfiddle.net/dNmNj/上实时查看。

我的目的是为#container清除浮动，以便蓝色块(This Block)停留在黄色块下方(而不是粉色块下面)。 然而，结果是它还清除了#navigation的浮动。

如何仅为父容器清除浮动，而不影响任何祖先容器？

- He Shiming

---

不确定这是否是您想要的：http://jsfiddle.net/dNmNj/2/（在“＃container”中添加了“overflow:hidden”） - Pete

是的，谢谢！这正是我想要的。你能解释一下为什么溢出会影响浮点数吗？ - He Shiming

已添加答案 - overflow hidden 与浏览器的 hasLayout 有关。 - Pete

@Pete：嗯...不是的。首先，只有IE浏览器使用hasLayout——如果这真的是一个hasLayout问题，那么解决方案只能在IE上起作用。 - BoltClock

说实话，我不确定为什么溢出（overflow）的东西有效，这只是我偶然发现的一个技巧。不过，由于它在所有浏览器中都不起作用，所以我从不使用它 - 这就是为什么我在提供答案时给出了一个解决方法。 - Pete

Answer 1

你可以通过将 overflow:hidden 添加到你的 #container 实现想要的效果：

http://jsfiddle.net/dNmNj/2

这篇文章讲解了清除浮动的好方法:

http://www.quirksmode.org/css/clearing.html

但是你的蓝色div之所以放置在这里，是因为 #container div 没有浮动 - 只有左边距。

以下是更适用于跨浏览器的改进版本：

http://jsfiddle.net/dNmNj/3/

- Pete

---

@何世明：除非解释是错误的。overflow: hidden不能清除浮动，它不是像我之前提到的hasLayout问题，而且在这里给出的两个示例之间在浏览器兼容性方面没有太大的区别。 - BoltClock

@BoltClock，你能解释一下在这种情况下overflow: hidden是什么意思吗？我正在使用Chrome和IE8进行工作，我刚刚意识到这个布局在IE中不起作用。 - He Shiming

@Pete，跨浏览器版本在IE8上不太起作用。我会尝试调查一下。 - He Shiming

我通过将宽度从50％减少到49％来解决了在IE中的问题，我想这毕竟是一个四舍五入的问题。 - He Shiming

可能是填充或边距问题，它们会添加到宽度之上。 - Pete

这个问题一直困扰着我。非常感谢。 - James