這篇文章主要介紹CSS清除浮動(dòng)方法有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比芒康網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式芒康網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋芒康地區(qū)。費(fèi)用合理售后完善,10年實(shí)體公司更值得信賴。1、設(shè)置父元素高度
如果一個(gè)元素要浮動(dòng),那么它的祖先元素一定要有高度.高度的盒子,才能關(guān)住浮動(dòng)
只要浮動(dòng)在一個(gè)有高度的盒子中,那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素.所以就是清除浮動(dòng)帶來的影響了.
弊端:工作上,我們絕對(duì)不會(huì)給所有的盒子加高度,這是因?yàn)槁闊⑶也荒苓m應(yīng)頁面的快速變化。
2、overflow
撐起父元素的高度
一個(gè)父親不能被自己浮動(dòng)的兒子撐出高度。但是,只要給父親加上overflow:hidden; 那么,父親就能被兒子撐出高了。
overflow:hidden;能夠讓margin生效。
overflow:hidden; overflow:auto;
弊端:如果有溢出要顯示的內(nèi)容,也都同時(shí)給隱藏了。
3、增加子元素(塊級(jí)),并且設(shè)置其clear屬性值為both來解決
→ clear:both;
最簡單的清除浮動(dòng)的方法,就是給盒子增加clear:both;表示自己的內(nèi)部元素,不受其他盒子的影響。
弊端:就是margin失效。兩個(gè)div之間,沒有任何的間隙了。
3.1、隔墻法:
在兩部分浮動(dòng)元素中間,建一個(gè)墻。隔開兩部分浮動(dòng),讓后面的浮動(dòng)元素,不去追前面的浮動(dòng)元素。
墻用自己的身體當(dāng)做了間隙。
我們發(fā)現(xiàn),隔墻法好用,但是第一個(gè)div,還是沒有高度。如果我們現(xiàn)在想讓第一個(gè)div,自動(dòng)的根據(jù)自己的兒子,撐出高度。
3.2、內(nèi)墻法:
內(nèi)墻法的優(yōu)點(diǎn)就是,不僅僅能夠讓后部分的p不去追前部分的p了,并且能把第一個(gè)div撐出高度。
這樣,這個(gè)div的背景、邊框就能夠根據(jù)p的高度來撐開
4、使用after或before偽對(duì)象清除浮動(dòng)
div:after{content:"";display:block;clear:both;} div:before{content:"";display:block;clear:both;}
這種方式用的比較多,在項(xiàng)目中建議使用這種方式
以上是“CSS清除浮動(dòng)方法有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!