浮动元素折叠边缘

根据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没有专家，所以请纠正我，如果我的理解是错误的

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

来源

2009-04-19 Waleed Eissa

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

效果图中的差异是由IE6对哪些边距流在一起的解释造成的。（如果你给每个div的背景色也使得它更容易看到这里发生了什么。）

两个或两个以上相邻的块盒垂直边距在正常流动崩溃

随着normal flow如此定义：

由于浮动不在流程中，浮动框前后创建的未定位块框垂直流动，就好像浮动不存在一样。

也就是说，它们一起流动并且具有相邻的垂直边缘，这些垂直边缘可能会塌缩。 IE6（和在怪癖模式下的IE7）得到这个错误，并认为浮动打破了流动，导致不会崩溃发生。

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

来源

2009-04-19 15:10:59 bobince

感谢您的解释，实际上我怀疑同样的事情，但不确定。至于使用填充而不是边距，实际上这是我为你提到的相同原因所做的。 – 2009-04-19 15:30:03

我把它加入到解决（IE7，FF）：

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

的浮动DIV和页脚间。

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

来源

2009-04-19 15:09:39

浮动元素折叠边缘

回答

相关问题