清除盒子内子元素浮动致使父元素塌陷的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;
        }