여백 붕괴가 작동하지 않습니다.

Question

일부 레이아웃을 만들려고하는데 문제가 있습니다. 그래서 내가이 html 코드

<div class="container"> 
    <div class="left"></div> 
    <div class="right"></div>  
<div> 

이 내 CSS 코드

.container{ 
    width:1080px; 
    margin:0 auto; 
    background:red; 
    overflow:hidden; 
} 

.left{ 
    background:yellow; 
    width:510px; 
    height:200px; 
    float:left; 
    margin:20px; 
} 

.right{ 
    background:blue; 
    width:510px; 
    height:200px; 
    float:right; 
    margin:20px; 
} 

인을 사용하지만, 내 코드가 작동하지 않는 마진 축소 개념을 알고있다. 위 출력이 있지만 인라인으로 두 div를 가져오고 싶습니다. http://jsfiddle.net/Cp2Bq/

그래서 마진 붕괴가 내 코드에서 작동하지 않는 이유를 알고 싶습니다.

Answer 1

그래서 마진 붕괴가 내 코드에서 작동하지 않는 이유를 알고 싶습니다.

이것은 정상적인 흐름이 아니기 때문에 발생합니다. 이 specification for floats에서 볼 수있는 바와 같이,

또한 일반 흐름 붕괴에 블록 상자의

두 개 이상의 인접한 수직 마진 : 사양이 말한다

부동 소수점이 흐름에 있지 않으므로 부동 소수점 상자 상자는 부동 소수점 상자의 전후에 을 생성하여 부동 소수점이 이 아닌 것처럼 만듭니다.