清除盒子内子元素浮动导致父元素塌陷的5种方法

Posted 2021-02-07 ggyc

更详细的解释请移动到：

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