清除css浮動的方法

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

一，我們為什麼要浮動

為什麼浮動，為什麼要清除浮動，以及清除浮動的方法。在網頁布局的時候有時需要元素並排顯示，如果不選擇浮動，那麼那些塊狀元素就會一行一行顯示，佔用空間不說，使用者體驗也是極為不好的。

以下是沒有浮動的元素代碼

<p class=“box”>        <p class=“box01”></p>        <p class=“box02”></p>    </p> .box{    background: #000;}.box01{    width: 100px;    height: 100px;    background: red;}.box02{    width: 100px;    height: 100px;    background: yellow;}

1-1圖是沒有浮動的元素，1-2圖是外層容器的寬高，下文會說到此次用意

在我們給元素加上浮動之後，布局就變了，兩個p並排顯示了，1-3，是不是很神奇，哈哈

但是大家有沒有發現最外一層的p背景色沒了，高度也變成了0，因為元素脫離的文檔流，在最外層的p中不佔空間，這時我們就需要清除浮動，清除由子項目浮動給父元素帶來坍塌的影響。（注意這裡清除浮動不是指之前給子項目設定的浮動，二是清除浮動給父元素帶來的影響，希望大家能明白）。

二清除浮動有三種方法：

第一種：clear:both;

在父元素的裡面添加一個類clear的p（跟box01,box02同級），然後再為這個類添加屬性值clear:both;便可以清除浮動，以下是代碼以及清除浮動之後的效果1-3

<p class=“box”>        <p class=“box01”></p>        <p class=“box02”></p>        <p class=“clear”></p>    </p>   .box{    background: #000;}.clear{    clear: both;}.box01{    width: 100px;    height: 100px;    background: red;    float: left;}.box02{    width: 100px;    height: 100px;    background: yellow;    float: left;}

可以看到背景色出來了，而父元素的高正是100px，這是子項目撐開的。

第二種：overflow：hidden；

在父元素添加overflow: hidden;也可以清除浮動，如下css代碼，但不提倡使用這個方法，overflow: hidden;還有一個意思就是隱藏超出的部分，處理不好還是會給頁面帶來麻煩。

.box{        background: #000;        overflow: hidden;    }

第三種：clearfix；

如果你的頁面使用bootstrap架構，引入css檔案，給父元素添加clearfix便可以清除浮動，這也是平時工作中最常用也是最受程式員喜歡的一種方法，只需添加一個類便可，而clear:both則是向頁面多加了一個p。所以小編向大家推薦第三種方法。

如果你的頁面使用的不是bootstrap架構，那麼也有源碼供初學者參考，向clearfix添加偽類實現清除浮動。

<p class=“box clearfix”>        <p class=“box01”></p>        <p class=“box02”></p>        <p class=“clear”></p>    </p> .box{    background: #000;}.clearfix:before,.clearfix:after{    content: ”;    display: table;//可以很好的解決瀏覽器安全色問題}.clearfix:after{    clear: both;}.box01{    width: 100px;    height: 100px;    background: red;    float: left;}.box02{    width: 100px;    height: 100px;    background: yellow;    float: left;}

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

推薦閱讀：

h5實現多圖片預覽上傳及點擊可拖拽控制項

S5讓分層螢幕適配