很多前端都是用.clearfix:after 和 .clearit的組合 來清除浮動， 下面我來講解下這倆種的用法：
首先大家切頁面經常用到浮動 float:left; float:right; 有浮動就需要清除他們，
after偽類由於受到ie6 7的不支援所以大多數時候，一般都需要定義乙個固定的class名設定屬性clear的值both的div 兩者配合使用.
///第一種結構左側
右側 我是底部
1 此時不清除浮動 標準瀏覽器 和ie8+ p標籤會跑到 右側浮動div的旁邊 如圖：
ie6 ie7下
我們可以看出，標準和ie8下 class名為main的div 沒被撐開，ie6 ie7下卻被浮動元素撐開了。
我們只需要解決 標準 和 ie8+的浮動 就可以；現在我們給main 追加個class名如下：
// 此處追加左側
右側 我是底部
因為我們在css中設定了 .clearfix:after所以浮動就不會繼承下去
我們發現 標準和 ie6+ 的 main 都已被撐開如下圖：
ie6下
標準下：
其他瀏覽器下就不截圖了。
//第二種結構 此時需要用到 .clearit
此時浮動 元素 和 不需要浮動的元素 被包在同乙個 父親下左側
右側 最後乙個
ie6 下
元素繼承浮動跑到 浮動元素旁邊 而且 有自己的背景
ie8+ 和標準
最後乙個div沒繼承浮動 但是 元素內的 內容 被擋在浮動div後面，背景消失，鑽入浮動元素底下。
此時 給右側div加clearfix class名;如下圖： 左側
右側 最後乙個
標準下和ie6+ 下 效果不變；左側
右側 //換種方法加上class為clearit的div
最後乙個
ie6+ 和標準下 如下圖：
此時 ie6+和標準下 顯示效果一致 浮動被清除；
這種簡單結構的時候 也可給 最後乙個div 設定 clear:both 這個屬性和值；也能得到此效果，
在結構比較複雜 清除頻繁的時候 不如 在浮動元素後面 加乙個
更方便， 當然 能用after偽類清除浮動的時候盡量用 偽類清除，這要 既減少冗餘**，用能便於以後修改和維護！！！
CSS清除float浮動的常用幾種方法
一 關於float浮動及其產生 在網頁布局排版中我們會經常用到float元素，float定義元素往哪個方向浮動，使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來 它有四個屬性值 none 預設值，元素不浮動，並會顯示在其在文字中出現的位置 left 元素向左浮動 rig...
清除浮動float的兩種常用方法
一 原頁面布局 1 html 2 css樣式 box left right bottom 3 頁面顯示效果 二 為了使class為bottom的div正常顯示在父級div的底部，需要新增屬性clear both 1 清除浮動的第一種方法 直接給class為bottom的div新增clear box ...
float以及清除
浮動的基礎作用 就是讓文字環繞。包裹性 設定了float之後，其寬度會自動調整為包裹住內容寬度，而不是撐滿整個父容器。display樣式是沒有變化的，還是block。破壞性 使用float的會無法與文字在同一行顯示，並且高度為0，所以會造成父元素高度的塌陷，因此就要清除浮動。浮動元素和絕對定位元素相...