前端面試題-clearfix（清除浮動）

1、浮動的概念

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

2、浮動的影響

1. 浮動會致使父元素高度坍塌

父元素中有子元素，而且父元素沒有設置高度，子元素在父元素中浮動，結果必然是父元素的高度爲0，這也就致使了父元素高度塌陷問題。

浮動脫離文檔流，這個問題會對整個頁面佈局帶來很大影響，如何解決高度坍塌問題，咱們須要清除浮動。

3、浮動的清除

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代碼

閱讀更多