css之浮动float

1】个人觉得这个说明挺清楚的：

浮动元素的定位是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

2】元素float后自动转化为块元素

3】为所有float元素设定width，除了img元素（有隐藏宽度）

4】清理浮动元素三种方法：

    a) 使用标签清理浮动（参考5】中的clear：both部分）

    b)在需要清理浮动的元素中定义overflow：auto；zoom：1（兼容ie6）；

    c)在需要清理浮动的元素，例如#layout上定义
        #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}

5】浮动元素的垂直边距(margin)会叠加（10+10），两个未浮动的元素垂直边距(margin)不会叠加（10）

#nofloatbox { 
border: 1px solid #FF0000; 
background: #CCC; 
zoom:1;
height:auto;
margin-bottom:5px;
}   
.floatbox { 
float: left;
width: 600px; 
height: 100px; 
border: 1px solid #0000FF; 
background: #00FF00; 
margin:10px;
}
#l{
clear:both;
width: 600px; 
height: 100px; 
border: 1px solid #0000FF; 
background: #00FF00; 
margin:10px;
}

<div id="nofloatbox"> 
<div class="floatbox"></div> 
<div class="floatbox"></div> 
<div class="floatbox"></div> 
<div id="l"></div> 

<div id="l"></div> 

</div>