清理浮動有很多種方式，像使用 br 標籤自帶的 clear 屬，使用元素的 overflow，使用空標籤來設定 clear:both 等等。但考慮到相容問題和語義化的問題，一般我們都會使用如下**來清理浮動。
複製**
**如下:
/* 清理浮動 */
.clearfix:after
.clearfix
其原理是，在「高階」瀏覽器中使用 :after 偽類在浮動塊後面加上乙個非 display:none 的不可見塊狀內容來，並給它設定 clear:both 來清理浮動。在 ie6 和 7 中給浮動塊新增 haslayout 來讓浮動塊撐高並正常影響文件流。
上面的**應該是現在主流的清理浮動方式。現在支付寶就使用這樣的方式。而現在，nicolas gallagher 給出了乙個更簡潔的方案：
復程式設計客棧制**
**如下:
.cf:before, .cf:after
.cf:after
.cf
原理還是一樣的。使用 :after 偽類來提供浮動塊後的 clear:both。不同的是，隱藏這個空白使用的是 display: table。而不是設定 visibility:hidden;height:0;font-size:0; 這樣的 hack。
值得注意的是這裡中的 :before 偽類。其實他是來用處理 top-margin 邊摺疊的，跟清理浮動沒有多大的關係。但因為浮動會建立 block formatting context，這樣浮動元素上的另而一元素上如果剛好有 margin-bottom 而這個浮動元素剛好有margin-top 的話，應該讓他們不摺疊（雖然這種情況並不常見）。
本文標題: 最簡潔的css清除浮動的方法
本文位址:
CSS清除浮動的方法
給元素設定了float屬性後脫離了文件流，不佔據位置，所以其父級無法將其包裹，需要清除浮動。段 box item style class box class item div div 效果 方法一 給父級設定高度 段 box 問題解決 缺點 擴充套件性不好，沒有解決根本問題 方法二 給父級加上flo...
css 清除浮動的方法
不新增清除浮動的時候 這裡我沒有給最外層的div.outer 設定高度，但是我們知道如果它裡面的元素不浮動的話，那麼這個外層的高是會自動被撐開的。但是當內層元素浮動後，就出現了一下影響 1 背景不能顯示 2 邊框不能撐開 3 margin 設定值不能正確顯示 清除浮動方法1 新增新的元素，給他的cs...
css清除浮動的方法
1.額外標籤法 在浮動元素末尾新增乙個空標籤 必須是塊級元素 如 div style clear both 不推薦，新增無意義的標籤，礙事 2.父級新增overflow方法 overflow hidden auto scroll 優點 簡單 缺點 內容增多時容易造成不會自動換行導致內容被隱藏，無法顯...