clearfix屬性怎么在css中使用？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司專注于蘿北企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,商城開發(fā)。蘿北網(wǎng)站建設(shè)公司,為蘿北等地區(qū)提供建站服務(wù)。全流程按需定制網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

Div布局如下：

Css代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .out{border:1px solid #F00; width:500px;}   

2. .inner1{width:200px; height:200px; float:left; border:1px solid #00F;}   

3. .inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}   

IE和FF顯示如下圖：

傳統(tǒng)的人解決方法：

但是，這么多加一個DIV有點不妥。一是多了一個沒有意義的DIV，二是在用dojo做Drag & Drop的時候，由于這個DIV是容器DIV的一個字節(jié)點，如果這個節(jié)點被移動，則會造成排版上的Bug：如果要顯示的藍(lán)框的DIV被移到這個DIV之后，則因為clear:both，它會被強制換一行顯示。所以，最好使用下面clearfix方法。外層div加上clearfix樣式。

clearfix定義如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}   

2. .clearfix{*zoom:1;}   

這樣修改以后顯示正常。

那段代碼是用來清除浮動的。

以下代碼可以這么解釋：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .clearfix:after {       <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容；   

2.     content: ".";     <----內(nèi)容為“.”就是一個英文的句號而已。也可以不寫。   

3.     display: block;   <----加入的這個元素轉(zhuǎn)換為塊級元素。   

4.     clear: both;     <----清除左右兩邊浮動。   

5.     visibility: hidden;      <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。仍然占據(jù)空間，只是看不到而已；   

6.     height: 0;     <----高度為0；   

7.     font-size:0;    <----字體大小為0；   

8. }  

整段代碼就相當(dāng)于在浮動元素后面跟了個寬高為0的空div，然后設(shè)定它clear:both來達(dá)到清除浮動的效果。（這個css的原理是經(jīng)過使用 after偽對象,它將在應(yīng)用clearfix的元素結(jié)尾添加content中的內(nèi)容,也就是一個".",并且把他設(shè)置為塊級元素 (display="block");高度設(shè)置為0,clear="both",然后將其內(nèi)容隱藏掉(visibility="hidden").這樣就會撐開此塊級元素.）

之所以用它，是因為，你不必在html文件中寫入大量無意義的空標(biāo)簽，又能清除浮動。

.clearfix { *zoom:1;}   <----這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內(nèi)部元素。具體意思的話，不用深究，聽說微軟的工程師自己都無法解釋清楚。height:1%效果也是一樣。

看完上述內(nèi)容，你們掌握clearfix屬性怎么在css中使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！