面試又被問到了清浮動啊，一下子沒答全，了解的也不是很透徹。再來總結(jié)一下！

為什么要清除浮動

因為浮動會使當前標簽脫離文本流，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。
而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。

解決浮動引起的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。

解決方法

方式一:使用overflow屬性來清除浮動

先找到浮動盒子的父元素，再在父元素中添加一個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響。

.ovh{
　　　overflow:hidden;
　}

注意：一般情況下也不會使用這種方式，因為overflow:hidden有一個特點，離開了這個元素所在的區(qū)域以后會被隱藏（overflow:hidden會將超出的部分隱藏起來）。

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單，代碼少，瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用

方式二:使用額外標簽法

在浮動的盒子之下再放一個標簽，在這個標簽中使用clear:both，來清除浮動對頁面的影響。

.clear{
　　　clear:both;
　}

a.內(nèi)部標簽：會將這個浮動盒子的父盒子高度重新?lián)伍_。

b.外部標簽：會將這個浮動盒子的影響清除，但是不會撐開父盒子。

注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標簽，造成結(jié)構(gòu)的混亂。

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點：簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題
缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

方式三:使用偽元素來清除浮動

直接在父元素上添加.clearfix類

.clearfix:after{
　　　　　　content:"";//設(shè)置內(nèi)容為空

　　　　　　height:0;//高度為0

　　　　　　line-height:0;//行高為0

　　　　　　display:block;//將文本轉(zhuǎn)為塊級元素

　　　　　　visibility:hidden;//將元素隱藏

　　　　　　clear:both//清除浮動
　　　　　}

　　　　.clearfix{
　　　　　　zoom:1;為了兼容IE
　　　　}

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點：代碼多，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持
建議：推薦使用，建議定義公共類，以減少CSS代碼

方式四:使用雙偽元素清除浮動

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

 .clearfix {
             zoom: 1;
            }

總結(jié)

第一種方法會將超出部分隱藏在某些時候我們想清除浮動并且保留超出部分時做不到。
第二種方法會增加許多不必要的標簽，所以我們盡量使用第三種方法來清除浮動,為什么不選擇第四種方法呢?因為第四種是第三種的改良版雖然比較簡便,但是不嚴謹。