BFC

什么是BFC

BFC 全名为块格式化上下文 (Block Formatting Context)。
BFC 相当于一个独立容器。当发现有元素发生重叠，或者相互干扰时，就可以考虑用BFC解决问题。
BFC 在计算内部元素高度时会计算浮动（float）元素的实际高度。

如何形成BFC

这里有几种常见的方式，除了这些还有很多

• display：inline-block
• float: left | right
• position: absolute | fixed
• overflow: hidden

利用BFC处理margin重叠问题

• 垂直方向的margin重叠

    .div {
        width: 200px;
        height: 200px;
        margin: 30px;
    }
    .red {
        background-color: red;
    }
    .blue {
        background-color: blue;
    }
  

  <div class="div red"></div>
  <div class="div blue"></div>
  

  可以发现垂直方向margin发生了重叠
  
  

  如何使用BFC处理这个问题？

  之前说了BFC相当于一个容器，那么我们可以给他一个容器并添加对应样式产生BFC

  .box {
      display: inline-block;
  }
  

  <div class="box">
    <div class="div red"></div>
  </div>
  <div class="div blue"></div>
  

当然也可以将display换成overflow，看情况而定

利用BFC处理浮动导致的高度塌陷问题

当我们使用float时，父元素如果没有设置高度，子元素为浮动元素，则会发生高度塌陷。
比如这样

    .div {
      width: 200px;
      height: 200px;
      float: left;
    }
    .box {
      border: 5px solid pink;
      width: 500px;
    }
    .red {
      background-color: red;
    }
    .blue {
      background-color: blue;
    }

  <div class="box">
    <div class="div red"></div>
    <div class="div blue"></div>
  </div>

可以明显发现父元素没有被内部元素撑开
利用BFC容器会计算内部浮动元素高度的原理

  .box {
      border: 5px solid pink;
      width: 500px;
      overflow: hidden;
  }

• 针对高度塌陷，还有别的解决方式
  比如在父元素末尾再添加一个元素

    span {
        clear: both;/*清除两边浮动*/
        display: block;/*块级元素独占一行*/
    }
  

    <div class="box">
      <div class="div red"></div>
      <div class="div blue"></div>
      <span></span>
    </div>
  

  同理，我们也可以利用伪元素after

    .box::after {
        content: '';/*伪元素必须要加content，不然伪元素无效*/
        clear: both;
        display: block;
    }
  

    <div class="box">
      <div class="div red"></div>
      <div class="div blue"></div>
      <!--::after-->>
    </div>
  

仅个人见解，哈哈，欢迎指错
参考：什么是BFC？看这一篇就够了