BFC がマージン オーバーレイの問題を解決できるのはなぜですか?

Question

http://jsfiddle.net/gothic/B6E8F

通常のフローでは、隣接する 2 つ以上のブロック要素の垂直方向のマージンが崩れるわけではありません。では、この例はどの条件に違反しますか?

Answer 1

w3.org マージン結合に関する仕様

次の場合に限り、2 つのマージンが隣接します:

• 両方とも、同じブロック書式設定コンテキストに参加するフロー内ブロックレベルのボックスに属します

• ラインボックス、クリアランス、パディング、境界線を区切ることはありません

• ...

マージンは同じBFC内のブロックレベルのボックスに属する必要があります。 overflow: hidden新しいBFCが作成されるため、自然に崩壊することはありません。