關於清除浮動的最佳方法

剛纔看了http://www.w3cfuns.com/article-1287-1.html的這篇文章

才明白清楚浮動還有如此多的方法，做者總結了不少不夠正確的方法，也給出了比較好的方法

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

優勢：結構和語義化徹底正確,代碼量居中
缺點：複用方式不當會形成代碼量增長

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;
4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。
經過分析發現，除了clear：both用來清除浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

 

閉合浮動

方法一：

相對於空標籤閉合浮動的方法代碼彷佛仍是有些冗餘，經過查詢發現Unicode字符裏有一個「零寬度空格」，也就是U+200B，這個字符自己是不可見的，因此咱們徹底能夠省略掉 visibility:hidden了

    .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
    .clearfix { *zoom:1; }

方法二：不大理解，由於第一次見過display:table

    /* For modern browsers */
    .cf:before,.cf:after {
    content:"";
    display:table;
    }
    .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
    .cf { zoom:1; }