首先，浮動這個樣式的出現，僅僅只是為了實現圖文環繞的效果，現在大多時利用浮動來布局；

浮動：

　　使元素推理文檔流，按照指定方向發生移動；

　　遇到父級邊界或者相鄰的浮動元素會停下來；

浮動的特性：

　　1，塊元素一行顯示多個；

　　2，內聯元素支持寬高；

　　3，沒有設置寬度時由內容撐開寬度；

　　4，脫離文檔流；

浮動的破壞性：

　　浮動元素脫離文檔流後，導致父級元素高度塌陷。父級元素無法包裹住子級浮動元素；

為什麽要清除浮動：

　　解決父級高度塌陷；

清除浮動的方法：

　　1，clear清除浮動

　　　　clear:left || right || both || none

　　　　　　clear:left 清除左側浮動元素；

　　　　　　clear:right 清除右側浮動元素

　　　　　　clear:both 清除左右兩邊

　　　　　　clear:none 不清除

　　　　　　代碼：

　　　　效果圖：

　　　　缺點：如果浮動元素過多浪費標簽；不優雅；

　　2.inline-block請浮動

　　　　效果圖：

　　　　缺點：margin：auto；失效；

　　3.<br />的clear屬性請浮動

　　　　代碼：

　　　　效果圖：

　　　　缺點： 當前頁面有很多模塊用到浮動時，每個用到的模塊都要加<br clear="all" />;

　　　　　　　不符合w3c標準；

　　4.以浮制浮

　　　　給父級添加浮動

　　　　代碼：

　　　　　效果圖：

　　　　　　缺點：不理智的行為，總會有個父級節點會塌陷；

　　5.：afte偽類請浮動

　　　　　代碼：

　　　　效果圖：

　　　　缺點：無；目前最優雅的清除浮動的方式；

清除浮動的幾種常用方法