建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這篇文章主要介紹CSS清除浮動(dòng)方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
1、設(shè)置父元素高度
如果一個(gè)元素要浮動(dòng),那么它的祖先元素一定要有高度.高度的盒子,才能關(guān)住浮動(dòng)
只要浮動(dòng)在一個(gè)有高度的盒子中,那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素.所以就是清除浮動(dòng)帶來(lái)的影響了.
弊端：工作上，我們絕對(duì)不會(huì)給所有的盒子加高度，這是因?yàn)槁闊⑶也荒苓m應(yīng)頁(yè)面的快速變化。
2、overflow
撐起父元素的高度
一個(gè)父親不能被自己浮動(dòng)的兒子撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。
overflow:hidden;能夠讓margin生效。
overflow:hidden; overflow:auto;
弊端：如果有溢出要顯示的內(nèi)容，也都同時(shí)給隱藏了。
3、增加子元素（塊級(jí)），并且設(shè)置其clear屬性值為both來(lái)解決
→ clear:both;
最簡(jiǎn)單的清除浮動(dòng)的方法，就是給盒子增加clear:both；表示自己的內(nèi)部元素，不受其他盒子的影響。
弊端：就是margin失效。兩個(gè)div之間，沒(méi)有任何的間隙了。
3.1、隔墻法：
在兩部分浮動(dòng)元素中間，建一個(gè)墻。隔開(kāi)兩部分浮動(dòng)，讓后面的浮動(dòng)元素，不去追前面的浮動(dòng)元素。
墻用自己的身體當(dāng)做了間隙。
我們發(fā)現(xiàn)，隔墻法好用，但是第一個(gè)div，還是沒(méi)有高度。如果我們現(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的高度來(lái)?yè)伍_(kāi)
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è)資訊頻道！
名稱(chēng)欄目：CSS清除浮動(dòng)方法有哪些-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://www.ef60e0e.cn/article/pcsih.html
