CSS清除float浮動的常用幾種方法
一、關於float浮動及其產生
在網頁佈局排版中我們會經常用到float元素，float定義元素往哪個方向浮動，使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。它有四個屬性值：
none （預設值，元素不浮動，並會顯示在其在文字中出現的位置）。
left （元素向左浮動） 。
right （元素向右浮動）。
inherit （規定應該從父元素繼承 float 屬性的值） 。
先來看看浮動的效果，為了讓兩個塊級元素並排顯示，我們使用了float屬性
<head> <meta charset="UTF-8"> <title>浮動</title> <style> body>div{width:500px;border: 2px solid red} .div1{width: 100px;height: 100px;background-color: blue;float: left} .div2{width: 100px;height: 100px;background-color: yellow; float: left} </style> </head> <body> <div > <div class="div1">我是div1</div> <div class="div2">我是div2</div> </div> </body>
效果：
div1和div2都是向左浮動，達到了我們並排排列的效果但是我們也看到了float也產生了很多副作用：父元素邊框塌陷，
背景不能顯示、不能設定padding和margin等等。所以這就是我們要學習消除浮動影響的原因。
二、消除浮動的方法
1.clear清除法
在浮動元素後面新增一個空的div。
<head> <meta charset="UTF-8"> <title>浮動</title> <style> body>div{width:500px;border: 2px solid red} .div1{width: 100px;height: 100px;background-color: blue;float: left} .div2{width: 100px;height: 100px;background-color: yellow; float: left} .empty{clear: both;} </style> </head> <body> <div > <div class="div1">我是div1</div> <div class="div2">我是div2</div> <div class="empty"></div> </div> </body>
效果：
2.給父元素設定高度
在css中父div中加height：200px；效果為：
這個方法是最簡單的，但是會導致我們程式碼的擴充套件性變差，因為我們的子元素一旦變化父元素也要變化，這樣就變得很不靈活了，所以在專案中我們不一般不用這種方法。
3.讓父元素也浮動
在父元素div中加float：left；但是這種方法的缺點是要給每一個父元素都加float比較麻煩，如果父元素多的話那就更麻煩了，同時浮動多了容易出問題，所以一般也不推薦這種方法。
4.overflow：hidden
這個方法非常簡單方便，在父元素中加overflow：hidden；(body>div{width:500px;border: 2px solid red;overflow: hidden;})這樣可以解決邊框塌陷的問題，但是要注意這個方法在下拉列表框場景下會遇到新的問題，並且還要考慮瀏覽器的相容問題。
5.after偽類清除法
這個方法是最好的，就出了寫法稍微麻煩一點點，沒有什麼副作用。寫法如下：
.father:after{ /*father是指浮動div元素的父元素*/
content：''; /*把father類後面的新增元素設定為空*/
display：block； /*把新增元素的內容設定為block塊級元素*/
clear：both； /*清除這個元素兩邊的浮動
}
下面來看我們上面的程式碼用after偽類清除，同樣達到了我們的目的：
<style>
body>div{width:500px;border: 2px solid red;}
body div:after{
content: '';
display: block;
clear: both;
}
.div1{width: 100px;height: 100px;background-color: blue;float: left}
.div2{width: 100px;height: 100px;background-color: yellow; float: left}
</style>
</head>
<body>
<div >
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
</div>
</body>
效果：
三、總結
在實際專案中我是比較推薦最後兩種方法，當然清除浮動的方法還有很多，我們可以自由選擇使用哪一種，只要最後能達到我們的目標並不出現其他問題就可以。本人只是羅列了我認為常見的清除浮動的方法，肯定還有其他方法，歡迎大家補充。