这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是BFC？
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
简而言之，BFC就是一个隔离的独立容器，其内部元素不受外部元素布局影响，反之也一样。
BFC有哪些表现呢？
- 其内部的块级元素会在垂直方向一个接一个的排列；
- 属于同一BFC的相邻盒子外边距会发生重叠（以外边距大的为主）；
- BFC不会与浮动元素重叠，并且可以包含浮动元素。
如何创建BFC？
以下是常见的创建BFC的CSS属性，满足任意一点即可：
- overflow: hidden
- float: left/right
- display: inline-block
- position: absolute/fixed
- display: table-cell/flex/grid
BFC解决了什么问题？
高度塌陷
场景还原
从上面的运行结果可以看到，当float盒子设置为浮动时，parent盒子高度坍塌为0，因为浮动元素脱离了文档流。
解决
此时可以通过创建BFC来解决该问题：
当给parent盒子创建BFC后，可以看到parent盒子的高度被float盒子撑开了，原理很简单，因为BFC可以包含浮动元素，计算其高度时会把浮动元素的高度也带上，因此parent的高度自然就可以被撑开啦~
margin边距重叠
场景还原
从上面图片可以看到，child2盒子的top外边距是被child1的bottom边距覆盖了的，或者说这两个边距合并了。
解决
分别给两个child盒子包裹一个BFC盒子即可，因为两个相邻的BFC不会发生外边距重叠~
其实BFC还有很多用处，这里就不一一列出了
总结
上面两个例子均体现了BFC内部元素不会受到外部元素的布局影响！！
然后BFC高度计算会包含内部浮动元素，另外就是当BFC浮动元素相邻时，浮动元素不会与BFC发生重叠。
参考资料： MDM 格式化上下文
