https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

Once again the BFC is doing this job of containing the things inside it, stopping them from escaping and poking out of the box。

什么是BFC

BFC就是一个可以包含所有在他里面的元素的这么一个区域，并且可以防止里面的元素溢出。

具体的作用

  1. 清除浮动
  2. 避免margin折叠
  3. 避免wrap float（与布局有关）

如何产生

常见的有

  • overflow(not visible)/float(not none)
  • position absolute/position fixed
  • display: inline-block;
  • display: table-cell等
  • display:flex display grid

    缺点

    那么常见的这些创建BFC的方式有什么不好的地方呢，以overflow为例：
  1. 浏览器渲染可能有意料之外的效果，如出现了意料之外的滚动条（浏览器只是在按overflow的要求渲染）
  2. 接手人代码读不懂，为什么这要overflow呢？（注释）

    附

    display: flow-root解决了这个问题，但浏览器支持不好。