一、BFC 是什么？
CSS 中的 BFC（Block Formatting Context） 是一种 布局机制，它决定了元素如何与其子元素以及周围的元素进行交互。是一种独立的渲染区域，内部元素的布局不会影响到外部，也不会被外部影响。可以看作是一个封闭的“容器”。
二、BFC 的触发方式
以下 CSS 情况会触发一个元素成为 BFC：
-
根元素
-
float不为none -
position为absolute或fixed -
display为inline-block、table-cell、table-caption、flex、grid -
display: flow-root（用于创建新的 BFC) -
overflow不为visible（如hidden、auto、scroll）
三、BFC 的特性
-
内部盒子在垂直方向一个接一个排列
-
BFC 不与浮动元素重叠（可以用来清除浮动）
-
BFC 内部的元素不会与外部的 margin 合并
-
计算 BFC 的高度时，浮动元素也会被包含在内
四、BFC 常见应用
- 清除浮动
- 防止 margin 合并
- 自适应高度包含浮动元素
