如果有一個(gè)DIV作為外部容器，內(nèi)部的DIV如果設(shè)置了float樣式，則外部的容器DIV因?yàn)閮?nèi)部沒有 clear，導(dǎo)致不能被撐開?？聪旅娴睦樱?/p>

Div布局如下：

Css代碼如下：

.out{border:1px solid #F00; width:500px;}   
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}   
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}   

IE和FF顯示如下圖：

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

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

clearfix定義如下：

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

這樣修改以后顯示正常。

那段代碼是用來清除浮動(dòng)的。

以下代碼可以這么解釋：

.clearfix:after {       <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容；   
    content: ".";     <----內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已。也可以不寫。   
    display: block;   <----加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。   
    clear: both;     <----清除左右兩邊浮動(dòng)。   
    visibility: hidden;      <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。仍然占據(jù)空間，只是看不到而已；   
    height: 0;     <----高度為0；   
    font-size:0;    <----字體大小為0；   
}

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

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

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

以上這篇css之clearfix的用法深入理解(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論