为什么这个块 div 会影响两个浮动 div？

Question

假设我的页面中有三个

：

<div id="left" class="test" style="float:left;"></div>
<div id="right" class="test" style="float:right;"></div>
<div id="footer">footer</div>

使用这个 css：

.test{  background:black;height:200px;width:200px;}
#footer{    background:yellow;margin:20px 0 0 0;}

我想要的是：

• 让“#left”向左浮动，
• 让“#right”向右浮动，
• 什么都不改变对于“#footer”，只需将其设置为 margin: 20px;

结果如下：

但我想知道为什么浮动的 div 也有与 #footer 相同的边距。它们是浮动的，因此它们独立于其他元素，为什么 #footer 会影响它们？

Answer 1

以及页脚上的 clear:both ，只需在元素周围添加一个容器“包装器”div 即可阻止这种情况发生 - 示例

实际上在页脚上添加 clear: Both; 不会让浮动和页脚之间有 20px 的间隙或者，您实际上需要向浮动添加 20px 底部边距 - 原因都链接到 许可或非许可及其与 边距折叠

为什么？

您说您想知道为什么会发生这种情况，在您的 OP 场景中，这是因为边距崩溃。

在原始示例中没有涉及间隙，所以是的，浮动被删除，因此页脚边距仍然相邻，因此与 body 元素折叠，因此 body element 是获得边距的元素，然后因为浮动实际上仍然在 body 内部，所以它们也获得了边距。

正如我上面提到的，创建一个包装器 div 来“包含”浮动会阻止这种情况发生，因为折叠规则也是如此。但是，您选择包含浮动，或者使用溢出：隐藏，或者通过浮动“包装器”来停止此交互，因为..来自折叠边距的部分：

元素的垂直边距
建立新的块格式
上下文（例如浮动和元素
与“溢出”而不是“可见”）
不要随着他们的流入而崩溃
孩子们。

你会看到， float 和“overflow other notvisible”这两个属性都是“包含浮动子项”的方法 - 实际上它们正在建立一个新的块格式化上下文，但简单地说，大多数人都知道它是“包含浮动”； ）

现在一旦你有了这个，就修复了你的第一个位，但是如果你决定在页脚上引入 clear:both ，现代浏览器将不会在之间添加 20px 的边距浮动和页脚..这实际上是正确的..来自 clear 属性的部分（我的粗体）：

然后间隙量设置为
较大者：

1. 放置块边界边缘所需的量甚至
   最低的底部外边缘
   待清除的浮动。

2. 将块的顶部边框边缘放置在
   它的假设位置。

为了将页脚的上边缘放置在浮动下方（在您的示例中），浏览器必须引入 200 像素的间隙，这远远超过 20 像素，因此它遵循规则 1。如果您的上边距页脚上的页边距为 220px，边距将大于所需的任何间隙，因此它将遵循规则 2。

因此，如果您确实希望页脚位于浮动体下方 20px，无论浮动体的高度是多少，您都可以将20px 作为两个浮动的底部边距，因此它[页脚]将通过清除规则 1 清除具有所需间隙/边距的浮动，无论哪个浮动最长。

PS：不要在 IE7 或更低版本中测试以上内容 - 我希望它不会太无聊；）

Answer 2

将 clear: Both 添加到 #footer CSS。这应该使页脚呈现在浮动 div 下方并具有所需的边距。

Answer 3

试试这个，这可能会解决你的问题：

<div id="right" class="test" style="float:right;"></div>
<div id="left" class="test"></div>
<div id="footer">footer</div>

CSS 保持不变。

Answer 4

我做了一个测试，然后发现这个页面有两个框，右侧浮动的框受到左侧框（在它之后）的影响：http://jsfiddle.net/4r75s/

防止父 div 在仅包含浮动内容时崩溃的溢出技巧似乎在这里起作用，即将溢出设置为隐藏、自动或滚动。我将它们包装在一个包含 div 中来执行此操作并且它有效： http://jsfiddle.net/4r75s/1/

#container {
    overflow: hidden;
}