對於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/