1、設置父元素高度
如果一個元素要浮動,那么它的祖先元素一定要有高度.高度的盒子,才能關住浮動
只要浮動在一個有高度的盒子中,那么這個浮動就不會影響后面的浮動元素.所以就是清除浮動帶來的影響了.
弊端：工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，并且不能適應頁面的快速變化。
2、overflow
撐起父元素的高度
一個父親不能被自己浮動的兒子撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。
overflow:hidden;能夠讓margin生效。
overflow:hidden; overflow:auto;
弊端：如果有溢出要顯示的內容，也都同時給隱藏了。
3、增加子元素（塊級），并且設置其clear屬性值為both來解決
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> → clear:both;
<p></p>
<p></p>
<p></p>
</div>
最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響。
弊端：就是margin失效。兩個div之間，沒有任何的間隙了。
3.1、隔墻法：
在兩部分浮動元素中間，建一個墻。隔開兩部分浮動，讓后面的浮動元素，不去追前面的浮動元素。
墻用自己的身體當做了間隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="clear"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我們發現，隔墻法好用，但是第一個div，還是沒有高度。如果我們現在想讓第一個div，自動的根據自己的兒子，撐出高度。
3.2、內墻法：
<div>
<p></p>
<p></p>
<p></p>
<div class="clear"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
內墻法的優點就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個div撐出高度。
這樣，這個div的背景、邊框就能夠根據p的高度來撐開
4、使用after或before偽對象清除浮動
div:after{content:"";display:block;clear:both;}
div:before{content:"";display:block;clear:both;}
這種方式用的比較多，在項目中建議使用這種方式
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。