javascript - 為什麼BFC可以解決margin疊加問題？

Question

http://jsfiddle.net/gothic/B6E8F

不是說兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊，那麼這個例子違反了哪個條件？

Answer 1

w3.org關於margin合併的規範說明

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context

• no line boxes, no clearance, no padding and no border separate them

• ...

margin要從屬於相同的BFC中的塊級盒子，overflow: hidden 創建了一個新的 BFC，所以自然就不會折疊了。