边缘与浮动元素折叠

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

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

但实际上并非所有浏览器(FF,Safari,Opera和Chrome)都会发生这种情况,除了IE6(虽然没有尝试使用IE7或IE8).这是代码:

HEADER
Floating div
FOOTER

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

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

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

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

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

正常流动中的两个或多个相邻的块箱垂直边缘坍塌

这样定义了正常流量:

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

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

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