什么是BFC？

BFC即Block Formatting Context的缩写，中文翻译过来就是块级格式化上下文。

BFC的原理

本质上就是BFC得渲染规则，总结起来有四点：

• 属于同一个BFC的俩个相邻的元素的margin会发生重叠
• BFC的元素不会与浮动元素产生重叠
• BFC的元素是一个独立的容器，容器内的元素不会影响容器外部的元素，相反，容器外的元素也不会影响容器内的元素
• 计算BFC的元素的高度的时候，浮动元素也会参与计算

如何创建BFC?

• float值不为none
• position为absolute或fixed
• display为inline-block，table-cell，table-caption，flex；
• overflow不为visible

BFC的使用场景

BFC的使用场景，紧贴BFC的原理进行阐述。
（1） BFC的元素垂直方向的边距会发生重叠

<style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            /* 创建BFC */
            overflow: hidden;
        }
        .block {
            height: 100px;
            margin: 10px 0 30px 0;
            background: greenyellow;

        }
    </style>
    <div class="container">
        <div class="block">我是第一个BFC</div>
        <div class="block">我是第二个BFC</div>
        <div class="block">我是第三个BFC</div>
    </div>

由于BFC内部元素的垂直方向的边距会发生重叠，因此第一个block和第二个block相距30px，并不是40px。因此，运行结果如下入所示。

（2） BFC的元素不会与浮动元素产生重叠

<style>
       * {
           padding: 0;
           margin: 0;
       }
       .left {
           float: left;
           width: 200px;
           height: 400px;
           background: yellowgreen;
       }
       .right {
           height: 500px;
           background: violet;
       }
   </style>
   <div class="left"></div>
   <div class="right"></div>

运行结果如下图所示：

可以发现，right类和left类发生了重叠，若业务要求我们right类和left类不能重叠，相互独立，这时候我们可以使用BFC的渲染规则，只需添加一行代码便可达到这一目的，对代码进行改造。

<style>
       * {
           padding: 0;
           margin: 0;
       }
       .left {
           float: left;
           width: 200px;
           height: 400px;
           background: yellowgreen;
       }
       .right {
           height: 500px;
           background: violet;
           /* 创建BFC */
           overflow: hidden;
       }
   </style>
   <div class="left"></div>
   <div class="right"></div>

查看运行结果，果然达到了我们想要的效果。

（3）计算BFC的元素的高度的时候，浮动元素也会参与计算
利用这条BFC的渲染规则，我们可以很好的利用其作清除浮动。老规矩，上代码。

<style>
      * {
          padding: 0;
          margin: 0;
      }
      .parent {
          background: red;
      }
      .children {
          float: left;
          height: 300px;
          width: 400px;
          background: springgreen;
      }
  </style>
  <div class="parent">
      <div class="children"></div>
  </div>

从运行结果可以看出，由于children类浮动脱离了文档流，因此没有把parent类的高度撑开，parent类高度为0，没有显示出来。因此我们可以利用BFC元素计算高度的时候，浮动元素也会参与计算这一BFC渲染规则，对其进行改造，同样是增添一行代码，改造后的代码如下。

<style>
       * {
           padding: 0;
           margin: 0;
       }
       .parent {
           background: red;
           /* 创建BFC */
           overflow: hidden;
       }
       .children {
           float: left;
           height: 300px;
           width: 400px;
           background: springgreen;
       }
   </style>
   <div class="parent">
       <div class="children"></div>
   </div>

给parent类创建了BFC之后，在计算parent类高度的时候，也会把浮动元素的高度计算在其中，这也算是清除浮动了吧。

如果觉得本文对你有收获的朋友，请点个赞，接下来的日子我会继续更新更好的技术博客！谢谢~