css的clearfix實現(xiàn)清楚浮動的方法：首先在需要清除浮動的時候，只要寫一個【.clearfix】就行了；然后在需要清浮動的元素中添加clearfix類名就好了。

本教程操作環(huán)境：windows7系統(tǒng)、css3版，DELL G3電腦。

css的clearfix實現(xiàn)清楚浮動的方法：

clearfix的定義：

.clearfix:after {}{ content: "."; /**//*內(nèi)容為“.”就是一個英文的句號而已。也可以不寫。*/ display: block; /**//*加入的這個元素轉(zhuǎn)換為塊級元素。*/ clear: both; /**//*清除左右兩邊浮動。*/ visibility: hidden; /**//*可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已；*/ line-height: 0; /**//*行高為0；*/ height: 0; /**//*高度為0；*/ font-size:0; /**//*字體大小為0；*/ } .clearfix {}{ *zoom:1;} /**//*這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內(nèi)部元素。*/

clearfix的原理：

1、在IE6, 7下zoom: 1會觸發(fā)hasLayout，從而使元素閉合內(nèi)部的浮動。

2、在標(biāo)準(zhǔn)瀏覽器下，.clearfix:after這個偽類會在應(yīng)用到.clearfix的元素后面插入一個clear: both的塊級元素，從而達(dá)到清除浮動的作用。

3、在需要清除浮動的時候，只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了。

相關(guān)教程推薦：CSS視頻教程