BFC的一点总结

BFC:块级格式化上下文，它是一个独立的渲染区域，父盒子触发BFC，不允许子元素去影响外界元素；
触发BFC的情况：
  1.overflow：hidden /auto / scroll
  2.float:left float:right
  3. display: inline-block /flex/table
  4. position: absolute / fixed
BFC作用：
  1. 清除浮动
     补充清除浮动的几种方法：
     a.给父盒子加高度
     b.在最后的子元素后面再加一个子盒子 clear:both;
     c.设置一个清除浮动的类  after伪元素清除浮动
      .clearfix:after{
                 display: block;
                 content:'';
                 clear: both;
                 height:0;
                 overflow：hidden
             }
     d.双伪元素
     .clearfix:before,.clearfix:after {
             content: '';
             display: table;
           }
        .clearfix:after {
             clear: both;
           }

  2. 避免margin塌陷(一个父盒子嵌套一个子盒子，子盒子margin-top带来的塌陷问题)
     补充解决margin塌陷的几种方法：
      a. 父盒子overflow: hidden;
      b.父盒子padding-top;
      c. 父盒子position:fixed;
      d.父盒子 display:table;
      e.父盒子加border
  3. 流式布局