高度塌陷的解决方案

高度塌陷的解决方案

        1、给父元素设置overflow:hidden
        (overflow:hidden可以触发BFC，是一个独立的渲染区域，局部规则，浮动元素也参与高度计算)  
        缺点:
          内容超出父元素的范围就会被隐藏


      2、在所有浮动元素的最下方，添加一个空盒子
       给空盒子设置clear:both,让空盒子把父元素撑开
       缺点：代码的复用率低，会写很多空盒子


       3、万能清除法
                /* 原理就是在父盒子的最后一个子元素设置为一个空盒子,然后清除掉浮动具体层级设置为1和最后一个子元素设置溢出隐藏占位隐藏是为了做兼容处理的 */
.box::after {
  content: "";
  display: block;
  clear: both;
  height: 0px;
  overflow: hidden;
  /* background: blue; */
  visibility: hidden;
  /* 占位隐藏 */
}

.box {
  zoom: 1
}
          :afterIE8以上和非IE浏览器才支持,zoom:1是为了解决IE的兼容问题