인접 요소의 여백에 영향을받는 두 개의 부동 요소 여백

Question

두 인접한 탐색 막대의 여백을 수정하면 두 부동 이미지의 여백이 변경됩니다. 왜 이런 현상이 발생합니까? 당신이 #no3에 float:left;을 추가 할 때까지 http://jsfiddle.net/cuzox/waPr4/1/

*HTML* 
<div> 
    <div id="no1">Image</div> 
    <div id="no2">Image</div> 
    <div id="no3">Nav</div> 
</div> 

*CSS* 
#no1{ 
width:100px; 
height:100px; 
float:left; 
background-color:#A1A1A1; 
} 

#no2{ 
width:100px; 
height:100px; 
float:left;  
background-color:#B1B1B1; 
} 

#no3{ 
margin-top:30px; 
} 

Answer 1

는 #no3 요소는 다른 두 요소를 존중하지 않기 때문에 컨테이너의 전체 너비에 포함되어 있습니다. #no3 요소에 여백을 추가하면 다른 두 요소가 영향을받습니다.