BFC块级格式化上下文

BFC: 块级格式化上下文，它是页面中一块渲染区域，在这个渲染区域里面有一套渲染规则，规定了元素的
布局方式以及如何和其它元素相互作用

BFC的规则：
1. 同一块BFC区域内的相邻元素外边距会发生重叠【margin重叠问题，分为相邻元素重叠和父子元素外边距塌陷问题】
2. BFC区域内的元素不会与BFC区域外的浮动元素发生重叠【两栏自适应效果，给非浮动元素添加overflow: hidden;】
3. 计算BFC区域的高度时，浮动元素高度也计算在内【类似清除浮动的作用，防止父元素高度为0】
4. BFC区域相当于一个容器，内部的元素不会影响到外部，外部的元素也不会影响内部

触发BFC的方式：
1. float属性值不为none
2. position属性值不为static或relative
3. display属性值为inline-block、flex、inline-flex等等
4. overflow不为visible

BFC应用：
1. 清除浮动：父元素添加overflow: hidden;
2. 解决父子级外边距塌陷问题，在父元素添加overflow: hidden;
3. 解决兄弟间垂直方向外边距重叠问题，给其中一个添加一个div父元素，并给div添加属性overflow: hidden;

参考：https://juejin.cn/post/6948227795059212318#heading-22
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://blog.csdn.net/leelxp/article/details/107611388?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link