CSS BFC是什么？

BFC

块格式化上下文（Block Formatting Context，BFC）

BFC是什么其实很难去讲清楚。就好像，你知道桌子是什么，但是你不好用语言形容，但是你看到了它，却可以认出来他是桌子一样。

那么我们只需要记住什么时候会 创建块格式化上下文

上面是MDN的说法，但是其实面试中不需要说这么多情况，毕竟这个也就是在面试中会使用到。
那么我们就记住一部分就好了。

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• overflow 计算值(Computed)不为 visible 的块元素
• display 值为 flow-root 的元素 （兼容性不太好）
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

块格式化上下文的可以清除浮动，可以将div中的浮动元素全部包裹起来。
我们平时会使用

.container::after{
  content:'';
  display:block;
  clear:both;
}

这种方式来清除浮动。那就是因为创造BFC来清除浮动会使用一些副作用的css

display:flow-root

这个属性的兼容性又不太好，所以BFC的讨论大多数都是存在于面试当中。