您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css中如何清除浮動(dòng),小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
清除浮動(dòng)的方法有clearboth的方法、設(shè)置clearfix的方法、overflow的方法以及給父元素設(shè)置雙偽元素的方法
在我們寫代碼的時(shí)候,有時(shí)因?yàn)槭褂昧薴loat浮動(dòng)元素而導(dǎo)致頁面中某些元素不能正確的顯示。
浮動(dòng)導(dǎo)致的后果:
(1)由于浮動(dòng)元素脫離了文檔流,所以父元素的高度無法被撐開,影響了與父元素同級(jí)的元素
(2)與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后,因?yàn)楦?dòng)元素脫離文檔流不占據(jù)原來的位置
(3)如果該浮動(dòng)元素不是第一個(gè)浮動(dòng)元素,則該元素之前的元素也需要浮動(dòng),否則容易影響頁面的結(jié)構(gòu)顯示
例:在一個(gè)div中設(shè)置三個(gè)div,讓三個(gè)div的來撐開父元素
<style> .box{border:1px solid #ccc;background:pink;} .red{width:100px;height:100px;background: red;} .green{width:100px;height:100px;background:green;} .blue{width:100px;height:100px;background: blue;} </style> <body> <div class="box"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </div>
效果圖:
加了float:left之后,父元素?zé)o法被撐開
清除浮動(dòng)的方法
(1)使用clear:both清除浮動(dòng)
在代碼中在放一個(gè)空的div標(biāo)簽,然后給這個(gè)標(biāo)簽設(shè)置clear:both來清除浮動(dòng)對(duì)頁面的影響。它的優(yōu)點(diǎn)是簡(jiǎn)單,方便兼容性好,但是一般情況下不建議使用該方法,因?yàn)闀?huì)造成結(jié)構(gòu)混亂,不利于后期維護(hù)
<div style="clear: both"></div>
(2)利用偽元素clearfix來清除浮動(dòng)
給父級(jí)元素添加了一個(gè):after偽元素,通過清除偽元素的浮動(dòng),達(dá)到撐起父元素高度的目的
.clearfix:after{ content:""; display:block; visibility:hidden; clear:both; }
(3)overflow方法的使用
當(dāng)給父元素設(shè)置了overflow樣式,不管是overflow:hidden或overflow:auto都可以清除浮動(dòng)只要它的值不為visible就可以了,它的本質(zhì)就是建構(gòu)了一個(gè)BFC,這樣使得達(dá)到撐起父元素高度的效果
.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}
(4)雙偽元素方法的使用
通過給父元素設(shè)置雙偽元素來達(dá)到清除浮動(dòng)的效果
.clearfix:before,.clearfix:after { content: ""; display: block; clear: both; }
關(guān)于css中如何清除浮動(dòng)就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(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)容。