BFC是什么

ps：上个月听朋友说BFC，做了一年多前端了居然不知道是啥，于是百度啥的才知道原来是块级元素排列的机制。虽然感觉比较概念化，但是有些确实挺实用的，整理了一下文档。

先了解FC是什么：Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
常见的FC有 BFC（块级格式化上下文）和IFC（行级格式化上下文）。CSS3 中还增加了 GFC 和 FFC。
BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC只有Block-level box（块级元素）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

哪些元素会生成BFC?

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex 
5. overflow不为visible

BFC的特性

1 内部的Box会在垂直方向上一个接一个的放置。
2 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3 bfc的区域不会与float的元素区域重叠。
4 计算bfc的高度时，浮动元素也参与计算
5 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC有什么用？

双飞燕，圣杯，三栏布局

<style>
  .warp {
    width: 100%;
    border: 5px solid #999999;
  }

  .left {
    height: 300px;
    width: 200px;
    background: red;
    float: left;
  }

  .content {
    height: 400px;
    background: green;
    /* BFC */
    overflow: hidden;
  }

  .right {
    height: 300px;
    width: 200px;
    background: black;
    float: right;
  }

  /* 此方法并没有影响后面的文档流 */
  .test1 {
    background: rgb(192, 107, 107);
    height: 300px;
    width: 200px;
    border: 5px solid darkblue;
  }

  .test2 {
    background: rgb(238, 63, 215);
    height: 300px;
    width: 800px;
  }
</style>

<body>
  <div class="warp">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
    <!-- content必须要位于最后一行,因为content占据文档流 -->
    <div style="clear: both;"></div>
    <div class="test1">给我加上了clear：both，又撑起了div，后面的流不变~注意，这个是为了撑起test1之前的内容。。。。当content只有200px时，我出现了塌陷,需要清除浮动~~</div>
  </div>
  <div class="test2">并未受影响</div>
</body>

没有overflow：hidden效果

overflow:hidden效果

注意content中的overflow：hidden有无的区别，再参考BFC的第三条：3 bfc的区域不会与float的元素区域重叠。

清除内部浮动，子元素撑不起父元素的高度。

<style>
  .wrap {
    border: 2px solid darkblue;
    /* BFC */
    overflow: hidden;
  }

  .aaa,
  .bbb {
    height: 50px;
    width: 50px;
    float: left;
  }

  .aaa {
    background: red;
  }

  .bbb {
    background: green
  }

  .ccc {
    height: 150px;
    width: 150px;
    background: orange;
  }
</style>

<body>
  <div class="wrap">
    <div class="aaa"></div>
    <div class="bbb"></div>
  </div>
  <div class="ccc">我是正常元素</div>
</body>

由于撑不起父级元素，黄色ccc异常

舒服

利用计算BFC的高度时，浮动元素也参与计算这一特点，就不难理解用BFC清除浮动了

margin重叠的问题

<style>
  .aaa,
  .bbb {
    height: 50px;
    width: 50px;
  }

  .aaa {
    background: red;
    margin-bottom: 100px;

  }

  .bbb {
    margin-top: 100px;
    background: green
  }

  .wrap {
    overflow: hidden;
  }
</style>

<body>
  <div class="aaa"></div>
  <div class="wrap">
    <div class="bbb"></div>
  </div>

</body>

没有wrap

有wrap

没有wrap的时候，间距是100px，有wrap的时候，间距是100px。。bbb在没有wrap的情况下，他和aaa是在一个BFC中的（要是不再同一个BFC，怎么会垂直排列呢是吧）。有了warp，bbb就处在独立的BFC下，那么根据2 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠就不难理解了。

总结

overflow：hidden 实现BFC
其实我们一直都在使用BFC，只是你不知道这个概念，你在文档里写块级元素一个个divdivdiv的时候，块级元素一个个在垂直方向整齐的排列，其实他就是BFC在搞得。
利用BFC可以实现三栏布局不乱插，浮动元素撑高度，margin不重叠功能

BFC是什么

推荐阅读更多精彩内容