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

Question

对于CSS，我们知道，垂直边距崩溃，如例子：

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

（的div之间的垂直边距仅为30像素。）

但对于浮动的div？为什么垂直边界不会崩溃？

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

（的div之间的水平和垂直边缘都最终成为60像素）。

Answer 1

According to W3C：

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

和...

两个空间被相邻的，当且仅当 ：

1）都属于在流块级 的箱子，参与同 块格式化上下文

which leads to。 ..

浮标，绝对定位元素，块容器（如 直列块，表细胞和 表字幕）未阻断 盒，和块盒用“溢出” 比“可见的”（当 值已经传播到 视除外），其他建立新的块 格式上下文为他们 内容。

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/