HTML、CSS小技巧二——CSS清除浮動

爲什麼要清除浮動？

因爲父級盒子很多情況下，不方便給高度，但是子盒子浮動就不佔有位置，最後父級盒子高度爲0，這樣的話，後面標準留的盒子就會跑到浮動的元素下面去，影響佈局。

清除浮動的方法

1. 額外標籤法(隔牆法)

在浮動元素末尾添加一個空的標籤例如<div style=”clear:both”></div>
優點：通俗易懂，書寫方便
缺點：添加許多無意義的標籤，結構化較差

2. 父級添加overflow屬性

給父級添加： overflow爲 hidden| auto| scroll 都可以實現.
優點：代碼簡潔；
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉；

3. 使用after僞元素

.clearfix::after {  
	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
	}   

.clearfix {
	*zoom: 1;  /* IE6、7 專有 */
	}   

優點：符合閉合浮動思想 結構語義化正確;
缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

4. 使用雙僞元素

.clearfix::before,
.clearfix::after { 
  content:"";
  display:table; 
}
.clearfix::after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優點：相較於3，代碼更簡潔
缺點：由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

推薦使用方法三、方法四清除浮動