Question

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

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

但实际上并非所有浏览器（FF，Safari，Opera和Chrome）都会发生这种情况，除了IE6（虽然没有尝试使用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>

添加明确：两者;对页脚div没有任何影响。

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

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

Answer 1

在IE6和标准浏览器中，浮动的边缘都与其兄弟姐妹一起崩溃。根据引用的标准，这是正确的。

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

正常流动崩溃中两个或多个相邻的块框垂直边距

如此定义normal flow：

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

也就是说，它们一起流动并具有相邻的垂直边缘，这可能会崩溃。 IE6（以及Quirks Mode中的IE7）出错了，认为浮动会破坏流量，导致不会发生崩溃。

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

Answer 2

我通过添加：

来解决（IE7，FF）

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

在浮动div和页脚之间。

[编辑：]当你浮动一个元素，然后在你想要从下一个空格的开头开始的元素之后，你应该/必须使用一个清除元素。扎克也是对的：如果你只是堆叠div，你不会/不应该漂浮任何东西。

边缘与浮动元素折叠

2 个答案: