国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發(fā) > CSS > 正文

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:
p,
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
如果對.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
而在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é)合具體情況來決定。
發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 三河市| 凤台县| 古蔺县| 观塘区| 合水县| 长沙县| 珲春市| 上虞市| 井研县| 西盟| 江口县| 内丘县| 淅川县| 大新县| 阳东县| 蒙阴县| 大方县| 炉霍县| 镇原县| 鲁甸县| 东山县| 沾化县| 平顶山市| 勃利县| 伊金霍洛旗| 荣昌县| 洪雅县| 长汀县| 南涧| 武陟县| 德钦县| 方山县| 霍邱县| 青海省| 安泽县| 台南县| 聊城市| 平利县| 高淳县| 翁源县| 万载县|