对于 CSS，垂直边距会折叠，但为什么浮动 div 不会折叠垂直边距？

Question

对于CSS，我们知道垂直边距会塌陷，例如：

http://jsfiddle.net/rbxL7/5/

（div之间的垂直边距只有30px。）

但浮动潜水器呢？为什么垂直边距不塌陷？

示例：http://jsfiddle.net/rbxL7/3/

（div之间的水平和垂直边距均为60px）。

Answer 1

根据W3C：

在CSS中，两个或更多的盒子（可能不是兄弟姐妹）可以组合形成单一保证金。

而且。。。

两个边距相邻当且仅当if：

1） 两者都属于流内块级别参与的框块格式化上下文

这导致…

浮动、绝对定位的元素、块容器（例如内联块、表格单元格和表格标题）框，以及带有"溢出"的块框除了"可见"（除非值已传播到视口）建立新块为其设置上下文格式内容。

Answer 2

你可以试试这个：

.outer { width: 600px; border: 1px dashed blue; overflow: hidden }  /* overflow: hidden is to clear the float if any */
.inner { float: left; width: 200px; height: 200px; border: 1px dashed orange; margin: 30px 0 0 30px; }
.outer .inner:last-child { margin: 30px; }

（如果目标浏览器不支持last-child，则在最后一个子级中添加一个类）

请参阅http://jsfiddle.net/rbxL7/6/