本文主要介紹了清除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;
}大家學會了嗎？有需要的朋友趕緊收藏起來吧。
相關推薦：
#以上是清除css浮動的方法小結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
