CSS清除浮動方法有哪些

這篇文章主要介紹CSS清除浮動方法有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1、設置父元素高度

如果一個元素要浮動,那么它的祖先元素一定要有高度.高度的盒子,才能關住浮動

只要浮動在一個有高度的盒子中,那么這個浮動就不會影響后面的浮動元素.所以就是清除浮動帶來的影響了.

弊端：工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，并且不能適應頁面的快速變化。

2、overflow

撐起父元素的高度

一個父親不能被自己浮動的兒子撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。

overflow:hidden;能夠讓margin生效。

overflow:hidden;
overflow:auto;

弊端：如果有溢出要顯示的內容，也都同時給隱藏了。

3、增加子元素（塊級），并且設置其clear屬性值為both來解決

<div>
      <p></p>
      <p></p>
     <p></p>
  </div>
   <div>   &rarr; 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;}

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

以上是“CSS清除浮動方法有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！