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

Question

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

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

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

但浮动的div怎么样？为什么垂直边距不会崩溃？

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

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

Answer 1

According to W3C：

  

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

和...

  

当且仅有两个边距相邻   如果：

     

1）都属于流入块级   参与相同的方框   阻止格式化上下文

which leads to ...

  

浮动，绝对定位元素，阻止容器（例如   内联块，表格单元格和   表格标题）不是阻止   盒子和带有'溢出'的块盒   除了“可见”之外（除非那个   价值已经传播到了   viewport）建立新的块   格式化他们的上下文   内容

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/