CSS有多少清除浮動的方式

這次帶給大家CSS有多少清除浮動的方式，清除浮動的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

這種方式用的比較多，在專案中建議使用這種方式

React與CSS3實作微信拆紅包動畫
CSS的background -attachment使用詳解

CSS3實作點擊放大的動畫實例

以上是CSS有多少清除浮動的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！