浮動原理及清浮動

浮動: left/right/none

元素加了浮動，會脫離文檔流(文檔流是文檔中可顯示對象在排列時所占用的位置) ，按照指定的一個方向移動直到碰到父級的邊界或者另外一個浮動元素停止

1.使塊元素在一行顯示；
2.使內嵌支持寬高；
3.不設置寬度的時候寬度由內容撐開；
4.脫離文檔流 ；
5.提升層級半層。

清浮動的方法
1.加高
問題：擴展性不好

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

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

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

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

6.after偽類 清浮動方法（現在主流方法）

.clear:after{content:‘‘;display:block;clear:both;}
.clear{zoom:1;}

after偽類： 元素內部末尾添加內容；:after{content"添加的內容";} IE6，7下不兼容
zoom縮放 觸發IE下 haslayout，使元素根據自身內容計算寬高。

7.overflow清浮動方法；

.overflow-clear-float {overflow:hidden
 
;}
.overflow-clear-float {overflow:auto;}

問題：需要配合 寬度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；overflow:hidden;溢出隱藏

更多詳細的關於清浮動方法點擊下面的鏈接查看：

清理浮動的幾種方法以及對應規範說明

清浮動的方法