浮动元素的边距折叠答案

【问题标题】：Margin collapsing with floated elements浮动元素的边距折叠
【发布时间】：2010-10-20 09:56:30
【问题描述】：

根据 CSS 2.1 标准，浮动元素的垂直边距不应与任何相邻元素一起折叠。

见： http://www.w3.org/TR/CSS21/box.html#collapsing-margins

但实际上这并不是在除 IE6 之外的所有浏览器（FF、Safari、Opera 和 Chrome）中都会发生的情况（虽然没有尝试使用 IE7 或 IE8）。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<div style="margin-bottom:10px;">HEADER</div>
<div style="float:left;width:100%;margin:10px 0px;">Floating div</div>
<div style="margin-top:10px;">FOOTER</div>
</body>
</html>

添加 clear:both;到页脚 div 没有任何区别。

我不是 CSS 方面的专家，所以如果我的理解有误，请纠正我

编辑：
显然我的问题引起了一些混乱。上面的代码只是为了演示我所指的行为，这不是我试图找到解决方案的真正问题。

【问题讨论】：

标签： css

【解决方案1】：

我通过添加来解决（IE7，FF）：

<div style="clear:both;"></div>

浮动 div 和页脚之间。

[编辑：]当你浮动一个元素，并在它之后放置一个你想要在下一个空格开始处开始的元素时，你应该/必须使用一个清除元素。 Zack 也是对的：如果你只是堆叠 div，你不应该/不应该浮动任何东西。

【讨论】：

【解决方案2】：

在 IE6 和标准浏览器中，浮动的边距都不会与其同级折叠。根据引用的标准，这是正确的。

渲染的差异是由 IE6 对哪些边距一起流动的解释造成的。（如果你给每个 div 一个背景颜色，就更容易看到这里发生了什么。）

正常流折叠中块框的两个或多个相邻垂直边距

normal flow 这样定义：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。

也就是说，它们一起流动并具有可能折叠的相邻垂直边距。 IE6（以及 Quirks 模式下的 IE7）出现此错误，并认为浮动会破坏流，导致不会发生崩溃。

由于围绕垂直边距和折叠的普遍混淆，加上仍然存在的浏览器错误，我建议避免垂直边距并尽可能使用填充。

【讨论】：

感谢您的解释，实际上我怀疑同样的事情，但不确定。至于使用填充而不是边距，实际上我这样做的原因与您提到的相同。