更詳細的解釋請移動到：

　　地址1：http://www.cnblogs.com/chedabang/p/5973601.html

　　地址2：https://www.cnblogs.com/libin-1/p/5975367.html　　　　　　　　

盒子塌陷是什麽？

何為盒子塌陷，盒子塌陷是由於子元素浮動導致的子元素脫離標準文檔流，父元素無法獲取子元素的高度而出現的一種現象。

盒子塌陷（如下）：

盒子未塌陷（如下）：

HTML/CSS代碼

....

// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

// html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
 

....

浮動是什麽？

浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另一個浮動元素。

解決框架塌陷的5種方式：

第一種：

　　解決方案：設置父元素的高度。

　　優點：簡單，方便。

　　缺點：無法自適應後面添加的元素的，即後面用其他方式添加的元素也會出現框架坍塌現象。

　　CSS代碼：.box-wrapper{height:100px;}　　　　　

第二種：

　　解決方案：使用overflow:hidden屬性

　　優點：簡單，有效。

　　缺點：對進行過定位的元素進行裁剪，即通過定位的子元素溢出父元素的部分會進行隱藏。

　　CSS代碼：.box-wrapper{overflow:hidden;}

第三種：隔墻法

　　解決方案：在需要清除浮動的地方，設置空盒子添加清除屬性clear:both進行清除。

　　優點：簡單，有效。

　　缺點：①代碼過於冗余，如果出現多處浮動要寫多個空盒子，增加了文件的大小。

　　　　　②使用本方法會出現設置margin值異常，空盒子兩邊的margin會被無效化。

　　HTML代碼：<div style="clear:both;"></div>

　　　　　　　　或<div class="clearbox"></div>(CSS代碼：.clearbox{clear:both;})

第四種：隔墻法進化版-內墻法

　　解決方案

　　優點：簡單，有效解決空盒子兩邊的margin會被無效化。

　　缺點：代碼過於冗余，如果出現多處浮動要寫多個空盒子，增加了文件的大小。

　　HTML代碼：以下要設置在需要清除浮動的內部末尾處：

　　　　　　　　<div style="clear:both;"></div>

　　　　　　　　或<div class="clearbox"></div>(CSS代碼：.clearbox{clear:both;})

[推薦]第五種：偽類劃分法

　　解決方案：使用偽類 :after 和 :before

　　優點：有效，可以解決兩個盒子之間設置margin值無效的問題。

　　缺點：幾乎可以忽略不計。

　　CSS代碼：

  /*現代瀏覽器clearfix方案，不支持IE6/7*/
        .clearfix:after {
            display: table;
            content: " ";
            clear: both;
        }

        /*全瀏覽器通用的clearfix方案*/  
        /*引入了zoom以支持IE6/7*/
        .clearfix:after {
            display: table;
            content: " ";
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }

        /*全瀏覽器通用的clearfix方案【推薦】*/
        /*引入了zoom以支持IE6/7*/
        /*同時加入:before以解決現代瀏覽器上邊距折疊的問題*/
           .clearfix:before,
           .clearfix:after {
               display: table;
               content: " ";
           }
        .clearfix:after {
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }

清除盒子內子元素浮動導致父元素塌陷的5種方法