CSS 清除浮動的N種方式

爲什麼要清除浮動

清除浮動主要是爲了解決，父元素因爲子級元素浮動引起的內部高度爲0的問題。
舉個例子：

<div class="content">
	<div class='incont'></div>
</div>

.content {
    width: 120px;
    margin: 30px;
    padding: 25px;
    background-color: #81b0db;
}

.incont {
    width: 50px;
    height: 200px;
    background: aquamarine;
}

此時元素是這樣的：

如果我們讓其中的子元素浮動，那麼就會變成下面這樣，我們會發現父元素的內容區的高度不見了：

.incont {
    width: 50px;
    height: 200px;
	background: aquamarine;
    float: right;
}

接下來我們要做的就是解決這個問題。

清除浮動的幾種方法

添加一個標籤設置clear屬性（不推薦）

<div class="content">
	<div class="incont"></div>
    <div style="clear: both;"></div>
</div>

缺點：添加無意義標籤，語義化差，不推薦

父級添加overflow屬性

通過觸發BFC方式，實現清除浮動：

.content {
    width: 120px;
    margin: 30px;
    padding: 25px;
    background-color: #81b0db;
    overflow: hidden;
}

缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素，不推薦。

使用after僞元素清除浮動（推薦使用）

.content {
    width: 120px;
    margin: 30px;
    padding: 25px;
    background-color: #81b0db;
    *zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
}
.content:after{/*僞元素是行內元素 正常瀏覽器清除浮動方法*/
	content: "";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}

缺點：ie6-7不支持僞元素：after，使用zoom:1觸發hasLayout.

使用before和after雙僞元素清除浮動

下面的寫法更簡潔：

.content:after,.content:before{
	content: "";
	display: table;
}
.content:after{
	clear: both;
}

還有其他方法這裏就不再贅述，比如直接給父元素設置高度、讓父元素也浮動、父級元素絕對定位（觸發BFC）、父級元素設置爲 inline-block（也是觸發BFC） 等方法。
滿足以下任意一條就可以觸發BFC，而觸發BFC就可以清除浮動：

• float的值不爲none。
• overflow的值不爲visible。
• position的值不爲relative和static。
• display的值爲table-cell, table-caption, inline-block中的任何一個。