CSS：閉合元素和浮動元素的差別

2024-07-11 08:42:55

字體：大中小

供稿：網(wǎng)友

提示：本文不是教程，而是對閉合浮動元素的方法在某個特定情況下的現(xiàn)象的討論，涉及float、clear、overflow、:after等知識，新手勿入。

float屬性在頁面排版上非常有用，但是也帶來很多問題。最常見的就是浮動元素的閉合問題。
如果一個沒有設(shè)定高度的不浮動元素的子元素浮動，則該元素的高度不會包括浮動子元素的高度，而只會包含其內(nèi)部不浮動元素的高度，因為浮動元素不屬于常規(guī)流向，它脫離了文檔流。因此如果要元素能夠自動包含浮動子元素，則需要閉合浮動元素。
目前比較常用的有3種方法：
利用浮動子元素后的元素清除浮動（包括添加1個空的元素以清除浮動）。使用:after偽元素，在元素最后插入清除。為元素設(shè)定overflow屬性除“visible”之外的值。
還有1個方法可以使元素自適應(yīng)高度：
浮動元素，浮動的元素會包含浮動的后代元素。
下列代碼，其顯示如圖1所示。
提示：所列代碼只是關(guān)鍵代碼，完整代碼請查看示例頁面。

CSS：

div{

margin:5px;

}

.wrap{

width:440px;

margin:10px;

clear:both;

}

.div1,

.div2p{

float:left;

width:80px;

margin:8px;

display:inline;

}

XHTML：

<divclass="wrap">

<divclass="div1">div1，浮動</div>

<divclass="div2">

<pclass="div2p">div2內(nèi)p1</p>

<pclass="div2p">div2內(nèi)p2</p>

<pclass="div2p3">div2內(nèi)p3，不浮動</p>

</div>

<divclass="div3">div3，不浮動</div>

</div>
提示：截圖是Firefox2.0（以下簡稱FF）中的效果，如無特殊聲明，則表示在WindowsIE7.0（以下簡稱IE）、Opera9.2（以下簡稱Op）、Safari3.0（以下簡稱Sa）中效果相同。

圖1：浮動元素與子元素浮動的元素
/web/css/format/clearFloat/clearFloat_01.gif

/web/css/format/clearFloat/clearFloat_01.gif

如果對.div2p增加CSS：

.div2p{

......

clear:left;

}
由于“clear:left”含義為：不允許本元素左邊有浮動框，而div1也是浮動元素，因此，p1和p2下移到了div1的下面，如圖2所示。
圖2：不浮動的元素內(nèi)的浮動子元素設(shè)定“clear:left”后的效果
/web/css/format/clearFloat/clearFloat_02.gif

/web/css/format/clearFloat/clearFloat_02.gif

而在IE中，整個div2都將下移到div1下，如圖3所示。
圖3：不浮動的元素內(nèi)的浮動子元素設(shè)定“clear:left”后IE的顯示
/web/css/format/clearFloat/clearFloat_03.gif

由圖3可以發(fā)現(xiàn)，雖然在圖1中IE正確地顯示了溢出的元素，但是，對于出發(fā)了layout的wrap，IE仍舊會擴展最外層的高度，以容納浮動元素。

閉合浮動元素方法1
此時，div2的高度只包括其內(nèi)未浮動元素的高度，因此使用第1種方法閉合浮動元素，為浮動元素后面的元素p3設(shè)定clear屬性：

.div2p3{

clear:left;

}
此時顯示如圖4所示，在IE中如圖5所示。
圖4：p3清除浮動后的效果
/web/css/format/clearFloat/clearFloat_04.gif

圖5：p3清除浮動后IE內(nèi)的效果
/web/css/format/clearFloat/clearFloat_05.gif

（?。ゴ蟮腎E，居然多出來與div2的margin一樣多的間隙。==b）
此時如果為div2增加左邊距（原設(shè)定為margin:5px）：

.div2{

......

margin-left:120px;

}
則顯示如圖6所示，在IE中如圖7所示。
圖6：增加左邊距后的效果
/web/css/format/clearFloat/clearFloat_06.gif

圖7：p增加左邊距后IE內(nèi)的效果
/web/css/format/clearFloat/clearFloat_07.gif

至此的效果，是左右2欄布局常用的方法，左欄固定寬度，右欄不設(shè)定寬度以求能自適應(yīng)。

閉合浮動元素方法2
嘗試方法2，利用:after清除浮動：

.div2:after{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}
顯示效果如圖8所示。（IE不支持，不用試了。==b）
圖8：使用:after清除浮動
/web/css/format/clearFloat/clearFloat_08.gif

可以看到div2內(nèi)的p3沒有清除浮動，位置仍在div2的頂端。
增加div2的左邊距，顯示如圖9所示。

.div2{

margin-left:120px;

}
圖9：增加div2的左邊距
/web/css/format/clearFloat/clearFloat_09.gif

由此可見使用:after清除浮動，不適合于浮動元素后面還有不浮動元素的情況。
閉合浮動元素方法3
嘗試方法3，使用overflow屬性：

.div2{

overflow:auto;

height:100%;/*針對ie6*/

}
此時，最熱鬧的情況出現(xiàn)了：
圖10：FF的效果
/web/css/format/clearFloat/clearFloat_10.gif

圖11：Op和Sa的效果
/web/css/format/clearFloat/clearFloat_11.gif

圖12：IE的效果（注：如果用IE6，效果也不一樣，==|||）
/web/css/format/clearFloat/clearFloat_12.gif

首先，div2的寬度收縮到div1的右邊了，也許這正好是期望的結(jié)果？
更熱鬧的在后面，增加div2的margin-left：

.div2{

margin-left:120px;

}
圖13：FF的效果
/web/css/format/clearFloat/clearFloat_13.gif

圖14：Op和Sa的效果
/web/css/format/clearFloat/clearFloat_14.gif

圖15：IE的效果（注：如果用IE6，效果也不一樣，==|||）
/web/css/format/clearFloat/clearFloat_15.gif

都是margin-left惹的禍，去掉margin-left：

.div2{

margin-left:0;

}
終于接近統(tǒng)一了。
圖16：去掉margin-left的效果
/web/css/format/clearFloat/clearFloat_16.gif

圖17：去掉margin-left在IE內(nèi)的效果
/web/css/format/clearFloat/clearFloat_17.gif

由此可見，overflow還是有很大局限性的。
但是造成FF、Op和Sa的顯示結(jié)果的原因又是什么呢？
浮動
div2浮動，浮動元素的高度會包含其內(nèi)部的浮動元素。
這種方法的局限性就是，div2浮動后寬度會被壓縮，因此必須給它一個寬度值，但是這樣就無法自適應(yīng)寬度。

.div2{

float:left;

}

.div3{

clear:both;

}
效果如圖18所示。
圖18：浮動div2
/web/css/format/clearFloat/clearFloat_18.gif

div2的浮動，還會造成wrap的高度問題，因此需要div3清除浮動。
由這個例子可以發(fā)現(xiàn)，由于div2的浮動，其內(nèi)的p元素清除浮動，并沒有受到div1的影響，因此，解決由于前2種方法中p1和p2下降到div1的高度之下的方法之一，可以將p1和p2外面套1個浮動的div，當然這可能影響到結(jié)構(gòu)，還需要結(jié)合具體情況來決定。

上一篇：理解(X)HTML的文檔結(jié)構(gòu)

下一篇：CSS教程：行高line-height屬性(2)