html - 两个 float 元素的边距受相邻元素边距的影响

Question

当我修改相邻导航栏的边距时，两个 float 图像的边距会发生变化。为什么会发生这种情况？ 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

在将 float:left; 添加到 #no3 之前，#no3 元素不考虑其他两个元素，因此被包含在容器的整个宽度中。当向 #no3 元素添加边距时导致其他两个元素受到影响。