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

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

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

CSS3實現點擊放大的動畫執行個體