一、BFC概念
FC（Formatting Contexts）即格式化上下文，是W3C CSS2.1规范的一个概念，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局以及和其他元素之间的关系和作用
常见的FC有：BFC（块级格式化上下文）IFC（行级格式化上下文）、GFC（网格布局格式化上下文）、FFC（自适应格式化上下文）
BFC（Block Formatting Contexts）即块级格式化上下文，具有BFC特性的元素相当于一个带有屏蔽罩的容器，容器里面的元素无论如何布局都对外边的元素没有影响，并且该容器具有一些普通容器没有的特性。
它可以理解为某个元素的一个CSS属性，但又不能被显式修改，BFC属性元素对内对外都有一些特性。引用《CSS世界》里的比喻，BFC容器就像一个结界，具有内部元素不被外部元素影响也不影响外部元素的重要原则，而BFC的特性都是基于此原则展开的。
二、BFC特性
（1）同一个BFC下的元素之间，外边距发生重叠（防止内元素影响外元素）
（2）BFC容器可以包裹容器内浮动的元素（防止内元素影响外元素）
（3）BFC容器能够阻止容器内元素被容器外浮动元素的覆盖（防止外元素影响内元素）
三、BFC触发条件（满足条件之一即可触发）
（1）<html><body>根元素
（2）display属性设置为inline-block 、table-cell、table-caption 、flex
（3）float属性设置除了none以外的left、right、inherit
（4）position属性设置为absolute 和 fixed
（5）overflow属性设置为除了visible以外的hidden、auto、scroll
四、BFC的作用
（1）自适应两栏布局（重要）
（2）阻止元素被浮动元素覆盖
（3）清除内部浮动，即可以包含浮动元素
父元素中有两个子元素分别设置左右浮动，左浮动子元素接触父元素border-box的左边，右浮动子元素接触父元素border-box的右边，且父元素高度塌陷，需要清除浮动来解决高度塌陷问题。触发父元素的BFC，使两个子元素处于同一个BFC中达到清除浮动的效果。
（4）阻止margin重叠——分属于两个不同的BFC
参考特性１，两个同一BFC下的子元素之间的margin相互重叠，为防止这种情况，在其中一个子元素外加一个触发BFC的div, 这样两个子元素分属于两个BFC则margin不会重叠。
参考文档：
https://zhuanlan.zhihu.com/p/25321647
https://juejin.im/post/5909db2fda2f60005d2093db