一、浮動的概念
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，是以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
二、浮動的影響
1. 浮動會導緻父元素高度坍塌
父元素中有子元素，并且父元素沒有設定高度，子元素在父元素中浮動，結果必然是父元素的高度為0，這也就導緻了父元素高度塌陷問題。
浮動脫離文檔流，這個問題會對整個頁面布局帶來很大影響，如何解決高度坍塌問題，我們需要清除浮動。
三、浮動的清除
1. clear屬性的空标簽
在浮動元素後添加一個空标簽
<div class="clear"></div> ，并且在CSS中設定
.clear{clear:both;} 即可清理浮動。
- 原理：添加一個空标簽，利用CSS提高的clear:both清除浮動，讓父元素可以自動擷取到高度
- 優點：簡單，代碼少，相容所有浏覽器
- 缺點：增加頁面的标簽，造成結構的混亂
- 建議：不推薦使用，此方法已經過時
2. :after僞元素
給浮動元素的容器添加一個
clearfix
的class，然後給這個class添加一個
:after
僞元素實作元素之後添加一個看不見的塊元素（Block element）清理浮動。
- 原理：通過CSS僞元素在容器的内部元素之後添加一個看不見的空格“/20”或點“.” ，并且設定clear屬性清除浮動。
- 優點：浏覽器支援較好
- 缺點：clearfix這個class需要添加zoom: 1（觸發haslayout），才能支援IE6和IE7浏覽器
- 建議：推薦使用，設定公共類，減少CSS代碼
轉自WEBING的部落格