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;}

這種方式用的比較多，在項目中建議使用這種方式

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！