重構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:after解釋下:content:」200b」;這個引數，unicode字元裡有乙個「零寬度空格」，即 u+200b，代替原來的「.」，可以縮減**量。而且不再使用visibility:hidden。.clearfix /*ie/7/6*/
終極版二：
.clearfix:before,.clearfix:after.clearfix:after
.clearfix{
*zoom:1;/*ie/7/6*/
清除浮動（clearfix）
web前端 2008 12 07 15 52 02 閱讀1089 字型大小 大 中小訂閱 在寫html 的時候，發現在firefox等符合w3c標準的瀏覽器中，如果有乙個div作為外部容器，內部的div如果設定了float樣式，則外部的容器div因為內部沒有clear，導致不能被撐開。看下面的例子 ...
clearfix清除浮動
工作中有用到這些東西，也只是看到別人這麼用就照用了，沒有理解。查到了他的乙個原理介紹，記錄下。首先，bootstrap裡面的寫法 clearfix clearfix before,clearfix after clearfix after 在乙個有float 屬性元素的外層增加乙個擁有clearfi...
clearfix清除浮動
終極版一 clearfix after clearfix ie 7 6 解釋下 content 200b 這個引數，unicode字元裡有乙個 零寬度空格 即 u 200b，代替原來的 可以縮減 量。而且不再使用visibility hidden。clearfix before,clearfix a...