BFC的理解与运用
什么是BFC
全称块级格式化上下文（Block Formatting Context），Block我理解为一个块盒子block box，格式化我理解为一个规则，上下文我理解为一个区域或者作用域，那么整体理解就是页面中一个按一定规则渲染的块级区域（消化之后的个人理解）
应用MDN的定义
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
主要用于解决什么问题
浮动元素导致父元素高度塌陷
由于浮动元素脱离了文档流，所以父级元素计算高度的时候不会计算浮动元素，所以会出现高度塌陷的情况，而在BFC的定义中，BFC计算高度的时候同样也会计算浮动元素，所以将父级设置为BFC则能解决高度塌陷的问题
相邻元素外边距重叠
也是很常见的情况，两个相邻的div元素
<style>
div {
background: #000;
width: 200px;
height: 100px;
margin: 100px;
}
</style>
<body>
<div>Haha</div>
<div>Hehe</div>
</body>
可以看到上下两个div都设置么上下margin为100px，那么两个div上下间隔应该200px，但是实际并不是，如图
两个div之间的间距并不是200px而是只有100px,这就是外边距重叠,解决这个问题就是将其中一个div创建为BFC,由于BFC是一个独立的区域,内部的渲染不会受外部的影响也不会影响外部，所以能解决这个问题
如何创建BFC
常见的创建BFC的方式有
- 根元素html
- display设置flow-root, inline-block, flex, grid, inline-flex和inline-grid
- 浮动元素
- 绝对定位position为absolute或者fixed
- overflow设置值不为visible
此外还有很多不一一列举了
MDN官网提出一点需要注意
使用 overflow 来创建一个新的 BFC，是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意
针对这个问题MDN官网建议使用display: flow-root来创建BFC，官网声称这个属性是不会带来副作用的，不过似乎兼容性不高，我去can i use?上面看了下这个属性ie所有版本都不支持，所以建议我认为还是用overflow比较好
