Warum kann BFC das Margin-Overlay-Problem lösen?

Question

http://jsfiddle.net/gothic/B6E8F

Das bedeutet nicht, dass die vertikalen Ränder von zwei oder mehr benachbarten Blockelementen im normalen Fluss zusammenbrechen. Welche Bedingung verletzt dieses Beispiel?

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，所以自然就不会折叠了。