今天就跟大家聊聊有關(guān)為什么需要css的清理浮動(dòng)及其作用是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、邳州網(wǎng)站維護(hù)、網(wǎng)站推廣。
一、為什么會(huì)出現(xiàn)浮動(dòng)?
浮動(dòng)(float)產(chǎn)生的最根本的原因是為了實(shí)現(xiàn)文字環(huán)繞效果;后來(lái)有人發(fā)現(xiàn)用它來(lái)做布局挺不錯(cuò)的,可以彌補(bǔ)傳統(tǒng)布局上的一些不足,挺方便的。
二、為什么要清除浮動(dòng),css清理浮動(dòng)有什么作用?
浮動(dòng)(float)可以控制浮動(dòng)框左右移動(dòng),直到遇到另一個(gè)浮動(dòng)框或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流,當(dāng)元素浮動(dòng)之后,不會(huì)影響塊級(jí)元素的布局,只會(huì)影響內(nèi)聯(lián)元素布局。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框的高度小于浮動(dòng)框的時(shí)候,此時(shí)就會(huì)出現(xiàn)“高度塌陷”:
上圖中父元素?fù)伍_(kāi)的高度是padding帶來(lái)的效果,父元素沒(méi)有設(shè)置高度。
在父元素沒(méi)有設(shè)置高度的情況下:
如果父元素里的子元素沒(méi)有設(shè)置浮動(dòng),那么父元素的高也會(huì)自動(dòng)被撐開(kāi)的,出現(xiàn)高度值;
如果父元素里的子元素設(shè)置了浮動(dòng),那么父元素的高就不會(huì)自動(dòng)被撐開(kāi)的,也就沒(méi)有高度值。
顯然這樣設(shè)置浮動(dòng)后出現(xiàn)了一些問(wèn)題,比如:
父元素的margin受到影響,無(wú)法實(shí)現(xiàn)上下左右居中,
若沒(méi)有給父元素設(shè)置高度,浮動(dòng)后父元素的高度沒(méi)有被撐開(kāi),那么父元素就不會(huì)在顯示屏上顯示。
實(shí)例說(shuō)明(背景色)
沒(méi)有清除浮動(dòng):
清除浮動(dòng)后:
三、怎樣清除浮動(dòng)
下面介紹css清除浮動(dòng)的幾個(gè)方法(實(shí)現(xiàn)上圖效果):
1.使用帶clear屬性的空元素
使用空標(biāo)簽清除浮動(dòng):在需要清除浮動(dòng)的父級(jí)元素內(nèi)部的所有浮動(dòng)元素后添加一個(gè)空標(biāo)簽(理論上可以是任何標(biāo)簽,但常用
)清除浮動(dòng),并為其定義CSS代碼clear:both。
代碼實(shí)例:
leftright
優(yōu)點(diǎn):簡(jiǎn)單,代碼少,瀏覽器兼容性好。
缺點(diǎn):需要添加大量無(wú)語(yǔ)義的html元素,代碼不夠優(yōu)雅,后期不容易維護(hù)。
2.使用CSS的overflow屬性
使用overflow清除浮動(dòng):只需在需要清除浮動(dòng)的元素中定義CSS代碼overflow:auto或overflow:hidden即可。
代碼實(shí)例:
leftright
優(yōu)點(diǎn):不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題,代碼量極少
缺點(diǎn):內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉,無(wú)法顯示需要溢出的元素
3.使用CSS的:after偽元素
對(duì)父元素使用:after偽元素,設(shè)置display:table
display:table 使生成的元素以塊級(jí)表格顯示,占滿剩余空間。
通過(guò)content: " "生成內(nèi)容作為最后一個(gè)元素,至于content里面是什么都是可以的,CSS經(jīng)典的是 content:".",有些版本可能content里面內(nèi)容為空。
代碼實(shí)例:
leftright
看完上述內(nèi)容,你們對(duì)為什么需要css的清理浮動(dòng)及其作用是什么有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。