BFC是Block Formatting Context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。
简单来说，BFC 实际上是一块区域，在这块区域中遵循一定的规则，有一套独特的渲染规则。
文档流其实分为普通流、定位流和浮动流三种，普通流其实就是指BFC中的FC，也即格式化上下文。
普通流：元素按照其在 HTML 中的先后位置从上到下、从左到右布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。
格式化上下文：页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用
BFC的几条规则：
- BFC 区域内的元素外边距会发生重叠；
- BFC 区域内的元素不会与浮动元素重叠；
- 计算 BFC 区域的高度时，浮动元素也参与计算；
- BFC 区域就相当于一个容器，内部的元素不会影响到外部，同样外部的元素也不会影响到内部。
BFC的应用：
清除浮动：父元素设置overflow: hidden触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕等等。 消除相邻元素垂直方向的边距重叠：第二个子元素套一层，并设置overflow: hidden，构建BFC使其不影响外部元素。 消除父子元素边距重叠，父元素设置overflow: hidden
触发BFC的方式：
- float 不为 none，浮动元素所在的区域就是一个 BFC 区域；
- position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域；
- display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域；
- overflow 不为 visible 的元素所在的区域也是一个 BFC 区域。
