1. 什么是BFC
MDN上的概念：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
- 对象：块级元素
- 本质：是一个区域
2 如何创建BFC
便与记忆的一种强行解释：创建一个独立的块级区域。
MDN上列举的方法：
- 根元素(
<html>)- 浮动元素（元素的
float不是none）- 绝对定位元素（元素的
position为absolute或fixed）- 行内块元素（元素的
display为inline-block）- 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值）- 表格标题（元素的
display为table-caption，HTML表格标题默认为该值）- 匿名表格单元格元素（元素的
display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）overflow值不为visible的块元素display值为flow-root的元素contain值为layout、content或paint的元素- 弹性元素（
display为flex或inline-flex元素的直接子元素）- 网格元素（
display为grid或inline-grid元素的直接子元素）- 多列容器（元素的
column-count或column-width不为auto，包括column-count为1）column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。
3 BFC应用
3.1 float布局导致父元素塌陷
范例：
<!DOCTYPE html>
<head>
<style>
.father {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
width: 100px;
}
.child {
border: 1px solid black;
height: 80px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div>普通子元素</div>
<div class="child">浮动子元素</div>
</div>
</body>
当子元素中使用了float后，子元素脱离文档流，父元素会无视该元素。因此会出现塌陷情况，将父元素变成BFC可解决该问题。 常用方法：
- after清除浮动
.father:after {
display: block;
content: '';
clear: both;
}
缺点：添加额外元素
2. 将父元素转化为BFC
overflow: hidden缺点：有副作用。display: flow-root缺点：有兼容性问题。
