Question

我有以下布局，有2级浮动容器：

<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的浮点数。

如何为父容器而不是任何祖先容器清除浮动？

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/

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

1 个答案: