BFC

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

BFC是什么其实很难去讲清楚。就如同，你晓得桌子是什么，然而你不好用语言形容，然而你看到了它，却能够认出来他是桌子一样。

那么咱们只须要记住什么时候会 创立块格式化上下文

下面是MDN的说法，然而其实面试中不须要说这么多状况，毕竟这个也就是在面试中会应用到。
那么咱们就记住一部分就好了。

  • 根元素（<html>）
  • 浮动元素（元素的 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的探讨大多数都是存在于面试当中。