클리어런스가있을 때 마진이 왜 붕괴됩니까?

Question

spec 상태 즉 :

그 형제 허가를하지 않는 한 인 - 플로우 블록 레벨 요소의 하부 가장자리가 항상 그 다음에 플로우 블록 레벨의 형제의 상부 마진 축소.

그러나 예기치 않은 것을 발견했습니다. code은 다음과 같습니다.

<div style="margin-bottom: 100px; "></div> 
<div style="float:left;width:10px;height: 10px; background: red"></div> 
<div style="margin: 100px;clear: left"></div> 
test 

제 div 하단 마진 '고 형제 클리어런스를 가지고 있지 않는'위배 제 div 붕괴의 여백.

상황을 설명하는 방법? 위의 규칙을보다 정확하게 설명 할 수있는 구체적인 예를 들어 줄 수 있습니까?

Answer 1

질문 전제가 잘못되었습니다. 모든 시나리오에 대해 마진은 축소되지 않습니다.

간단한 경우는 예를 들어 주어진 크롬, 는 통관, 제 DIV의 하단 가장자리는 제 DIV의 마진 축소하지 않은 않는 번째 요소이며, 계산 된 클리어런스는 -90px. 따라서 세 번째 상자의 상단은 컨테이너 상단에서 100px + 100px - 90px = 110px입니다.

이 계산은 clear 속성에 대한 CSS 2.2 사양의 예제 2에 설명되어 있습니다.

마찬가지로 Firefox 또는 Edge에서 예제 앞에 내용이 있거나 심지어 맨 위 테두리가있는 경우에도 여백이 축소되지 않고 여백이 -90px입니다.

본문에 선행 내용이나 상단 테두리가 없을 경우 예외적 인 경우가 Firefox 및 Edge입니다. 이 경우 Edge는 여백을 축소하지 않고 여백을 0으로 계산합니다. Firefox는 여백을 축소합니다.