什么是BFC
BFC 即 Block Formatting Context，块级格式上下文，其名字中带上下文字样，就像别的编程特性中的上下文一样，用户代码在上下文中可以访问到特别的变量，可以干一些特别的事情，说的再简单一点就是进入了某个环境
触发了BFC的元素，就像把自己声明成了一个黑盒，它里面的元素不管怎么闹，都和外面无关系，同样的外面的元素也不会影响到里面
在日常编写css过程中，我们总是在有意无意中创建了BFC，只不过可能我们没有注意到
如何创建BFC
MDN关于BFC的文档中描述了在何种情况下会触发创建BFC，在日常开发中比较常见的有以下几种：
- HTML根元素
- float 浮动
- 绝对定位 (absolute / fixed)
- overflow 属性不为visible(默认)
- display 为: table / flex / grid / flow-root (新)
flow-root 是一种新的没有副作用的 display 方式，有效消除了overflow等hack手段的副作用
BFC应用
1. 清除浮动
在BFC中，虽然浮动元素脱离了文档流，但在统计内部元素高度的时候仍然会被统计，这样对于容器里全都是浮动元素的情况就很有用，只要在容器上使用任一种上述的创建BFC的办法即可达到清除浮动的效果
2. 消除 margin 坍塌问题
两个相邻的元素之间的最终 margin 值以较大值为准，而不是两个元素的margin和，可以认为是出现margin重叠的情况，只要为两个元素添加容器元素，并触发容器元素的BFC，两个容器就不会有任何重叠，因为两个BFC黑盒相互不影响
