BFC，英文全称：Block Formatting Context，即“块格式化上下文”，是 CSS2.1 规范中的一个概念，定义了浏览器对于 Web 页面中的独立的渲染区域的布局规则。
规范原文是这样描述的，“A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context”，翻译成中文就是“一个块格式上下文包含创建该上下文的元素的所有子元素，但是不包括创建了新的块级格式上下文的子元素的内部元素”。
BFC 的布局规则：
1.BFC 容器内的块从上往下排列
2.BFC 容器内两个相邻块在垂直方向的margin会发生重叠
3.BFC 区域不会与设置为浮动的元素重叠，会紧贴浮动元素
4.BFC 容器的高度会包含浮动元素
5.BFC 容器内的子元素与外部隔离，互不影响
创建 BFC 的方式：
1.根元素（<html>）
2.浮动元素（float 值不为 none）
3.绝对定位元素（position 值为 absolute 或 fixed）
4.行内块元素（display 值为 inline-block）
5.display 值为 table、table-row、table-row-group、table-header-group、table-footer-group、table-cell、flow-root
6.overflow 值不为 visible、clip 的块元素
BFC 的特殊应用场景：
1.清除浮动元素造成的高度塌陷（清除浮动参考：CSS清除浮动的方法）
2.避免外边距重叠（见 css外边距叠加问题，即垂直方向margin合并）