CSS——父元素高度塌陷

默认情况下，父元素的高度会被子元素撑高。

如果子元素设置了浮动，脱离文档流，就无法撑开父元素的高度，导致父元素高度塌陷，影响到接下来的布局。

 

方法一：BFC（Block formatting context）

1. 1. 通过伪类，添加一个 .clearfix 的类来清除浮动

      .clearfix::before,.clearfix:after{
        display:table;
        content:'';
        clear:both        
      }

       

2. clear：both，清除的是两侧的浮动，哪一侧的浮动距离大，就清除哪一侧
3. 既解决了高度塌陷问题，又可以确保父元素和子元素的垂直外边距不会重叠

方法二：hasLayout

.box{
  zoom:1      
}