溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)css中為什么要清除浮動(dòng)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
一、理解清除浮動(dòng)
1、為什么要清除浮動(dòng)
我們前面說(shuō)過(guò)，浮動(dòng)本質(zhì)是用來(lái)做一些文字混排效果的，但是被我們拿來(lái)做布局用，則會(huì)有很多的問(wèn)題出現(xiàn)。
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問(wèn)題，此時(shí)就需要在該元素中清除浮動(dòng)。
準(zhǔn)確地說(shuō)，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響
2、清除浮動(dòng)本質(zhì)
清除浮動(dòng)的本質(zhì):主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0的問(wèn)題。
我們來(lái)詳細(xì)解釋下這句話
再解釋下就是在標(biāo)準(zhǔn)流下面一個(gè)父p沒(méi)有設(shè)置高度屬性,那么它的高度就會(huì)被子元素的高度撐開(kāi)。但是如果這個(gè)父p中的子元素是浮動(dòng)的話，如果父p下面再有
一個(gè)兄弟p，那么這個(gè)兄弟p就會(huì)遮擋這個(gè)父元素。這個(gè)現(xiàn)象也叫浮動(dòng)溢出。
示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
.father{
height:200px;
border:1pxsolidred;
width:300px
}
.big{
width:100px;
height:100px;
background-color:purple;
float:left;
}
.small{
width:80px;
height:80px;
background-color:blue;
float:left;
}
.footer{
width:400px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<pclass="father">父p
<pclass="big">子p</p>
<pclass="small">子p</p>
</p>
<pclass="footer">兄弟p</p>
</body>
</html>
運(yùn)行結(jié)果
很明顯這里，p1和p2已經(jīng)上浮，而兄弟p就往上移動(dòng)。這里因?yàn)楦竝有文字所以占了點(diǎn)高度，不然兄弟p會(huì)完全覆蓋父p。
當(dāng)然我們可以通過(guò)設(shè)置父p的高度，來(lái)使它不被兄弟p所覆蓋。比如這里設(shè)置height:200px;
在刷新下頁(yè)面
當(dāng)父p設(shè)置高度后，被覆蓋的問(wèn)題卻是解決了，但在很多時(shí)候我們是不會(huì)去設(shè)置父p的高度，因?yàn)楹芏鄷r(shí)候我們都不知道父p的高度要設(shè)置多少。
所以這個(gè)時(shí)候需要思考解決這個(gè)問(wèn)題。
二、清除浮動(dòng)的方法
清除浮動(dòng)的方法本質(zhì):就是把父盒子里浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來(lái)影響其他元素。
在CSS中，clear屬性用于清除浮動(dòng)。
基本語(yǔ)法格式
選擇器{clear:屬性值;}
屬性值
1、額外標(biāo)簽法
通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽，例如
<pstyle="clear:both"></p>
我們?cè)谏厦娴拇a添加
<body>
<pclass="father">父p
<pclass="big">子p</p>
<pclass="small">子p</p>
<pstyle="clear:both"></p><!--只需在父盒子里最后面添加這個(gè)空標(biāo)簽添加clear:both屬性就可以清除浮動(dòng)-->
</p>
<pclass="footer">兄弟p</p>
</body>
運(yùn)行結(jié)果
完美解決了。
優(yōu)點(diǎn)通俗易懂，書(shū)寫方便。
缺點(diǎn)添加無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差。
2、父級(jí)添加overflow屬性方法
可以通過(guò)觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面會(huì)講）
可以給父級(jí)元素添加：overflow為hidden|auto|scroll都可以實(shí)現(xiàn)。
我們將上面代碼修改為
<body>
<pclass="father"style="overflow:hidden;">父p<!--父元素添加overflow:hidden-->
<pclass="big">子p</p>
<pclass="small">子p</p>
</p>
<pclass="footer">兄弟p</p>
</body>
也是能實(shí)現(xiàn)去除浮動(dòng)的效果。
優(yōu)點(diǎn)代碼簡(jiǎn)潔
缺點(diǎn)內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。
3、使用after偽元素清除浮動(dòng)
:after方式為空元素的升級(jí)版，好處是不用單獨(dú)加標(biāo)簽了**
示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>使用after偽元素清除浮動(dòng)</title>
<style>
.clearfix:after{/*正常瀏覽器清除浮動(dòng)*/
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;/*zoom1就是ie6清除浮動(dòng)方式*ie7一下的版本所識(shí)別*/
}
.father{
border:1pxsolidred;
width:300px;
}
.big{
width:100px;
height:100px;
background-color:purple;
float:left;
}
.small{
width:80px;
height:80px;
background-color:blue;
float:left;
}
.footer{
width:400px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<pclass="fatherclearfix">
<pclass="big"></p>
<pclass="small"></p>
</p>
<pclass="footer"></p>
</body>
</html>
優(yōu)點(diǎn)符合閉合浮動(dòng)思想結(jié)構(gòu)語(yǔ)義化正確
缺點(diǎn)由于IE6-7不支持:after，使用zoom:1觸發(fā)hasLayout。
注意：content:"."里面盡量跟一個(gè)小點(diǎn)，或者其他，盡量不要為空，否則再firefox7.0前的版本會(huì)有生成空格。
4、使用before和after雙偽元素清除浮動(dòng)
使用方法將上面的clearfix樣式替換成如下
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
優(yōu)點(diǎn)代碼更簡(jiǎn)潔
缺點(diǎn)由于IE6-7不支持:after，使用zoom:1觸發(fā)hasLayout。
5、總結(jié)
1、在網(wǎng)頁(yè)主要布局時(shí)使用:after偽元素方法并作為主要清理浮動(dòng)方式.文檔結(jié)構(gòu)更加清晰；
2、在小模塊如ul里推薦使用overflow:hidden;（同時(shí)留意可能產(chǎn)生的隱藏溢出元素問(wèn)題）；
感謝各位的閱讀！關(guān)于“css中為什么要清除浮動(dòng)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
