清除浮動的方法（解決高度塌陷）

問題的產生

文檔流中父元素高度默認由子元素撐開

代碼：

<div class="box">
    <div class="div"></div>
</div>

box{
  width:300px; margin:0 auto; border:10px solid #000;
}
.div{
  width:200px; height:200px; background:red;
}

效果：

為子元素添加浮動后，子元素脫離文檔流，無法撐起父元素，導致父元素高度塌陷

.div{width:200px;height:200px;background:red;float:left;}

清除浮動的方法

第一種：開啟BFC

根據W3C的標准，在頁面中元素都有一個隱含的屬性 Block Formatting Context,簡稱BFC，默認是關閉的；

開啟元素BFC后，元素將會具有以下特性：

• 父元素的垂直外邊距不會和子元素重疊
• 開啟BFC的元素不會被浮動元素所覆蓋
• 開啟BFC的元素可以包含浮動元素

開啟BFC的方法：

　　1. 給父元素設置寬高【不推薦】

　　　　副作用：父元素寬高寫死了，不能根據子元素自動調節；

　　2. 給父元素也添加浮動【不推薦】

　　　　副作用：父元素脫離文檔流，父元素的寬度會丟失，且會導致下邊的元素上移，不能解決問題。

　　3. 給父元素添加”display:inline-block“【不推薦】

　　　　副作用：可以解決問題，但會導致寬度丟失。

　　4. overflow【常見，副作用最小】

 　　　　overflow設置為非visible的值。推薦使用hidden（副作用最小）

　　　　a) auto （溢出顯示滾動條）

　　　　b) scroll （默認就顯示滾動條）

　　　　c) hidden （溢出隱藏）[常用]

注：但在IE6及以下的瀏覽器中不支持BFC，所以使用這種方式不兼容IE6。在IE6中有類似BFC的隱含屬性 hasLayout，開啟方式很多，推薦使用zoom:1

第二種：在浮動元素后添加元素，並設置其clear屬性

<div class="box">
        <div class="div"></div>
<!—因為clear元素並未脫離文檔流，所以會撐起box元素的高-->
         <div class="clear"></div>  
</div>

.clear{height:0;font-size:0;clear:both;}

第三種：br元素的clear屬性

br元素本身沒有高度，所以也就不會存在IE低版本下最小高度問題。只需要在浮動元素下添加一句 : <br clear=”all” />

<div class="box">
        <div class="div"></div>
        <br clear="all"/><!—就這一句解決問題-->
</div>

※第四種：after偽類【各大公司推薦】

可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動，和第二種方法原理相同，可達到相同的效果，而且不會在頁面中添加多余的div，這是最推薦的方式，幾乎沒有副作用

在IE6中，不支持after，所以在IE6中還需要使用hasLayout來處理（zoom：1）

.box:after{content:"";display:block;clear:both;}