日常切圖布局中經常要用到浮動，但是，只會用卻不知道浮動的原理，清除浮動的作用。

今天就講解一下浮動的基本作用與原理，清除浮動的那些方法，日常開發通常用什麽清除浮動。

一、什麽是浮動？

使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。

二、什麽是文檔流？

文檔流是文檔中可顯示對象在排列時所占用的位置，默認從上到下，從左到右排序。

三、為什麽要使用浮動？

布局中要兩個div並排顯示，在不改變div元素屬性的情況下，使用浮動使最方便的實現方法。

float:left | right | none | inherit;

四、浮動的作用

1、塊在一排顯示

2、使內聯支持寬高

3、默認內容撐開寬度

4、脫離文檔流

5、提升層級半層

五、清除浮動的方法

1.加高 問題：擴展性不好

2.父級浮動 問題：頁面中所有元素都加浮動，margin左右自動失效（floats bad ！）

3.inline-block 清浮動方法： 問題：margin左右自動失效；

4.空標簽清浮動 問題：IE6 最小高度 19px；（解決後IE6下還有2px偏差）

5.br清浮動 問題：不符合工作中：結構、樣式、行為，三者分離的要求。

6.after偽類 清浮動方法（現在主流方法） .clear:after{content:‘‘;display:block;clear:both;} .clear{zoom:1;} after偽類： 元素內部末尾添加內容； :after{content"添加的內容";} IE6，7下不兼容 zoom 縮放 a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。 b、FF 不支持；

7.overflow:hidden 清浮動方法； 問題：需要配合 寬度 或者 zoom 兼容IE6 IE7； overflow: scroll | auto | hidden； overflow:hidden;溢出隱藏（裁刀！）

最常用after偽類清除浮動。

css 浮動float