MDN中BFC的概念描述为：块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
那么BFC究竟是什么？有什么用？如何实现BFC？
一、什么是块格式化上下文？
块格式化上下文（BFC）我们可以当成两部分来看—-“块”以及“格式化上下文”；“块”就是指块级盒子，“格式化上下文”可以理解为一个拥有特殊的渲染格式或者说是规则的独立区块其内部元素的布局不会影响到外部元素，所以整合在一起，指的是web视口里一个独立的块级盒子渲染区域，这个区域用一套规则来实现块级盒子的布局，并且不会影响区域外的其他元素布局。
BFC的布局规则：
- BFC区域内的盒子垂直分布。
- 垂直方向上盒子之间的距离由margin决定，同一个BFC内相邻盒子的margin会发生重叠（重叠后的效果以margin较大的为准）。
- 水平方向上盒子靠左对齐，从左到右排列。
- BFC区域不与浮动的元素重叠。
- BFC区域内的元素布局不会影响区域外元素。
- BFC区域的高度包含浮动元素高度。
二、块格式化上下文有什么用？
通过对BFC布局规则的了解，我们可以利用BFC的特性来实现一些布局或者解决一些问题，例如：
- 防止margin发生重叠。
- 防止发生因浮动导致的高度塌陷。
- 实现自适应布局等。
三、如何使用BFC？
要形成一个BFC区域大致需要满足以下条件之一：
- overflow 值不为 visible、clip 的块元素。
- display 值为 flow-root 的元素。
- 浮动元素（float 值不为 none 的元素）。
- 绝对定位元素（position 值为 absolute 或 fixed）。
- 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素。
- 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素）。
- 行内块元素（display 值为 inline-block）。
- 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
- 表格标题（display 值为 table-caption，HTML 表格标题默认值）。