本文主要介紹了CSS解決浮動，清除浮動的幾種方法：1、設定父元素高度；2、overflow#；3、增加子元素（區塊級），並且設定其clear屬性值為both來解決（隔間法、內牆法）；4、使用after或before偽物件清除浮動。下面跟著小編一起來看下吧
1、設定父元素高度
#如果一個元素要浮動,那麼它的祖先元素一定要有高度.高度的盒子,才能關住浮動
只要浮動在一個有高度的盒子中,那麼這個浮動就不會影響後面的浮動元素.所以就是清除浮動帶來的影響了.
弊端：工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，並且不能適應頁面的快速變化。
2、overflow
撐起父元素的高度
一個父親不能被自己浮動的兒子撐出高度。但是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。
overflow:hidden;能夠讓margin生效。
overflow:hidden; overflow:auto;
弊端：如果有溢出要顯示的內容，也都同時給隱藏了。
3、增加子元素（區塊級），並且設定其clear屬性值為both來解決
<p> <p></p> <p></p> <p></p> </p> <p> → clear:both; <p></p> <p></p> <p></p> </p>
最簡單的清除浮動的方法，就是為盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響。
弊端：就是margin失效。兩個p之間，沒有任何的間隙了。
3.1、隔牆法：
在兩個部分浮動元素中間，建造一個牆。隔開兩個部分浮動，讓後面的浮動元素，不去追前面的浮動元素。
牆用自己的身體當做了間隙。
<p> <p></p> <p></p> <p></p> </p> <p class="clear"></p> <p> <p></p> <p></p> <p></p> </p>
我們發現，隔牆法好用，但是第一個p，還是沒有高度。如果我們現在想讓第一個p，自動的根據自己的兒子，撐出高度。
3.2、內牆法：
#<p> <p></p> <p></p> <p></p> <p class="clear"></p> </p> <p> <p></p> <p></p> <p></p> </p>
內牆法的優點就是，不僅能夠讓後部分的p不去追前部分的p了，並且能把第一個p撐出高度。
這樣，這個p的背景、邊框就能夠根據p的高度來撐開
4、使用after或before偽物件清除浮動
p:after{content:"";display:block;clear:both;}
p:before{content:"";display:block;clear:both;}這種方式用的比較多，在專案中建議使用這種方式
以上是使用CSS清除浮動方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
