一、是什么
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
-
内部的盒子会在垂直方向上一个接一个的放置
-
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
-
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时，浮动子元素也参与计算
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
二、触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
-
body 根元素
-
浮动元素：float 除 none 以外的值
-
绝对定位元素：position (absolute、fixed)
-
display 为 inline-block、table-cells、flex
-
overflow 除了 visible 以外的值 (hidden、auto、scroll)
三、作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的margin折叠
