## float（**浮動**，一個個挨著）
>[success]### 一、文檔流
**文檔流：** HTML頁面的標準文檔流是：從上到下，從左到右，遇塊(塊級元素)換行。
**浮動層：** 脫離文檔流，進行左右浮動，緊貼著父元素的左右邊框。
>[info]### 二、浮動
**特性:** 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。(向一邊依靠,擠滿換行)
**常用用途:** 讓div在同一行排列
<div style="background:#ddd;overflow:hidden;">
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
</div>
<br>
>[warning]### 三、清除浮動
### 浮動產生負作用
* 父級元素不能被撐開.高度為0,背景不能顯示,邊框不能隨內容而被撐開(**父元素塌陷**)
* 影響周圍其它元素布局.
* margin padding設置值不能正確顯示
### 所以用了浮動之后要**清除浮動**
### 方式一:在浮動的元素最后加一個空div
~~~
<div style="clear:both;"></div>
~~~
缺點:冗余無關代碼
### 方式二:父級元素增加 overflow:hidden
缺點:高度不能固定.否則將被隱藏
優點:簡潔
### 方式三(推薦) :父級定義 偽類:after 和 zoom
~~~
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clearfloat{
zoom:1;/*兼容IE6、IE7清除浮動*/
}
~~~
[清除浮動的8種方法](http://www.jb51.net/css/173023.html)
[浮動詳細說明](http://www.w3school.com.cn/css/css_positioning_floating.asp)
