BFC가 마진 오버레이 문제를 해결할 수 있는 이유는 무엇입니까?

Question

http://jsfiddle.net/gothic/B6E8F

정상 흐름에서 두 개 이상의 인접한 블록 요소의 수직 여백이 붕괴된다는 의미는 아닙니다. 그렇다면 이 예는 어떤 조건을 위반합니까?

Answer 1

w3.org 여백 병합 사양

다음과 같은 경우에만 두 여백이 인접해 있습니다.

• 둘 다 동일한 블록 형식화 컨텍스트

에 참여하는 유입 블록 수준 상자에 속합니다.

• 선 상자 없음, 간격 없음, 패딩 없음, 테두리 없음

• ...

마진은 동일한 BFC의 블록 레벨 박스에 속해야 하며, overflow: hidden 새로운 BFC가 생성되므로 자연스럽게 붕괴되지 않습니다.