css可以去掉浮動(dòng);css去掉浮動(dòng)的方法:1、父級(jí)容器定義“overflow:hidden”樣式;2、浮動(dòng)結(jié)尾處,添加帶有“clear:both”樣式的div或p標(biāo)簽;3、父級(jí)容器定義“overflow:auto”樣式。
成都創(chuàng)新互聯(lián)長(zhǎng)期為上千多家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為延吉企業(yè)提供專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),延吉網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
推薦教程:CSS視頻教程
浮動(dòng)是布局的時(shí)用到的一種技術(shù),能夠方便我們進(jìn)行布局。
1、浮動(dòng)的設(shè)置: css屬性float: left/right/none 左浮動(dòng)/右浮動(dòng)/不浮動(dòng)(默認(rèn))
2、浮動(dòng)的原理:
使當(dāng)前元素脫離普通流,相當(dāng)于浮動(dòng)起來(lái)一樣,浮動(dòng)的框可以左右移動(dòng),直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣
3、浮動(dòng)的影響:
對(duì)附近的元素布局造成改變,使得布局混亂
因?yàn)楦?dòng)元素脫離了普通流,會(huì)出現(xiàn)一種高度坍塌的現(xiàn)象: 原來(lái)的父容器高度是內(nèi)部元素?fù)伍_(kāi)的,但是當(dāng)內(nèi)部元素浮動(dòng)后,脫離普通流浮動(dòng)起來(lái),那父容器的高度就坍塌,變?yōu)楦叨?px。
如下圖:清除浮動(dòng)的5種方法1、父級(jí)div定義overflow:hiddenLeftRight
原理: 使用overflow:hidden時(shí),瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度。
優(yōu)點(diǎn): 簡(jiǎn)單,代碼少,瀏覽器支持好。
缺點(diǎn): 必須定義width或zoom:1,不能和position配合使用,因?yàn)槌龅某叽绲臅?huì)被隱藏。
建議: 只推薦沒(méi)有使用position或?qū)verflow:hidden理解的朋友使用。
2、結(jié)尾處加空div標(biāo)簽 clear:bothLeftRightdiv2
原理: 添加一個(gè)空p,利用css提高的clear:both清除浮動(dòng),讓父級(jí)p能自動(dòng)獲取到高度。
優(yōu)點(diǎn): 簡(jiǎn)單,代碼少,瀏覽器支持好,不容易出現(xiàn)怪問(wèn)題。
缺點(diǎn): 不少初學(xué)者不理解原理; 如果頁(yè)面浮動(dòng)布局多,就要增加很多空p,讓人感覺(jué)很不爽。
建議: 此方法是以前主要使用的一種清除浮動(dòng)方法。
3、父級(jí)div定義heightLeftRight
原理: 父級(jí)p手動(dòng)定義height,就解決了父級(jí)p無(wú)法自動(dòng)獲取到高度的問(wèn)題。
優(yōu)點(diǎn): 簡(jiǎn)單,代碼少,容易掌握。
缺點(diǎn): 只適合高度固定的布局,要給出精確的高度,如果高度和父級(jí)p不一樣時(shí),會(huì)產(chǎn)生問(wèn)題。
建議: 不推薦使用,只建議高度固定的布局時(shí)使用。
4、父級(jí)div定義overflow:auto.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}
原理: 同1,使用overflow:auto時(shí),瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度。
優(yōu)點(diǎn): 簡(jiǎn)單,代碼少,瀏覽器支持好。
缺點(diǎn): 內(nèi)部寬高超過(guò)父級(jí)p時(shí),會(huì)出現(xiàn)滾動(dòng)條。
建議: 不推薦使用,如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。
5、父級(jí)div定義偽類(lèi):after和zoomLeftRight
優(yōu)點(diǎn):
瀏覽器支持好,不容易出現(xiàn)怪問(wèn)題(目前:
大型網(wǎng)站都有使用,如:
騰迅,網(wǎng)易,新浪等等)。
缺點(diǎn):
代碼多,不少初學(xué)者不理解原理,要兩句代碼結(jié)合使用,才能讓主流瀏覽器都支持。
建議:
推薦使用,建議定義公共類(lèi),以減少CSS代碼。
更多編程相關(guān)知識(shí),請(qǐng)?jiān)L問(wèn):編程教學(xué)??!
網(wǎng)頁(yè)名稱(chēng):css可以去掉浮動(dòng)嗎?
URL鏈接:http://weahome.cn/article/cjoipi.html