BFC（Block Formatting Context）直译为“块级格式化范围”。它提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

比如：浮动元素会形成 BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个 BFC 就是一个独立的行政单位的意思。也可以说 BFC 就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里 box 的布局，与这个容器外的毫不相干。

创建

• 根元素或包含根元素的元素
• 浮动元素。float 不为 none
• 绝对定位元素。position: absolute / fixed
• 行内块元素。display: inline-block / table
• overflow 不为 visible。
• 弹性元素。display: flex / inline-flex 元素的直接子元素。