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

更詳細的解釋請移動到：

　　地址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;})

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

 

　　解決方案：在須要清除浮動的地方，設置空盒子添加清除屬性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;
        }