工作中有用到這些東西，也只是看到別人這麼用就照用了，沒有理解。查到了他的乙個原理介紹，記錄下。
首先，bootstrap裡面的寫法：
.clearfix
.clearfix:before,
.clearfix:after
.clearfix:after
在乙個有float 屬性元素的外層增加乙個擁有clearfix屬性的div包裹，可以保證外部div的height，即清除"浮動元素脫離了文件流，包圍和文字的 div 不佔據空間"的問題。
」閒聊css之關於clearfix–清除浮動「 （的文章給了乙個比較清晰的分析：
構成block formatting context的方法有下面幾種：
float的值不為none。
overflow的值不為visible。
display的值為table-cell, table-caption, inline-block中的任何乙個。
position的值不為relative和static。
很明顯，float和position不合適我們的需求。那只能從overflow或者display中選取乙個。
因為是應用了.clearfix和.menu的選單極有可能是多級的，所以overflow: hidden或overflow: auto也不滿足需求
（會把下拉的選單隱藏掉或者出滾動條），那麼只能從display下手。
我們可以將.clearfix的display值設為table-cell, table-caption, inline-block中的任何乙個
但是display: inline-block會產生多餘空白，所以也排除掉。
剩下的只有table-cell, table-caption，為了保證相容可以用display: table來使.clearfix形成乙個block formatting context
因為display: table會產生一些匿名盒子，這些匿名盒子的其中乙個（display值為table-cell）會形成block formatting context。
這樣我們新的.clearfix就會閉合內部元素的浮動。
清除浮動（clearfix）
web前端 2008 12 07 15 52 02 閱讀1089 字型大小 大 中小訂閱 在寫html 的時候，發現在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子 ...
clearfix清除浮動
終極版一 clearfix after clearfix ie 7 6 解釋下 content 200b 這個引數，unicode字元裡有乙個 零寬度空格 即 u 200b，代替原來的 可以縮減 量。而且不再使用visibility hidden。clearfix before,clearfix a...
清除浮動clearfix
學習標籤 css clearfix 什麼是.clearfix css 複製 clearfix after clearfix 上述 說明 css 複製 clearfix after clearfix 這是針對於ie6的，因為ie6不支援 after偽類，這個神奇的zoom 1讓ie6的元素可以清除浮動...