1.什么是BFC
MDN官方对于BFC的定义是：块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
也就是说，BFC是页面上的一个独立的区域，在它里面的元素不会影响到外面的元素。
2.BFC的触发条件：
①根元素：html
②浮动元素：float值为left或right
③overflow值为hidden或scroll或auto
④position值为absolute或fixed
⑤display值为inline-block或flex或grid
3.BFC的使用场景：
①防止margin重叠
有两个div盒子，都给他设置了外边距margin值为100px,按理来说在页面上渲染出来就应该是两个盒子之间有个200px的间距。
<div></div>
<div></div>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px;
}
</style>
但是结果呢，很明显渲染出来的只是一个100px的间距，另一个100px没渲染出来。因为两个div都处于同一个BFC容器下（html），所以第二个div的上边距和第一个div的下边距发生了重叠，所以两个盒子之间的间距只有100px。这就是外边距塌陷的问题，也被叫做外边距折叠。
外边距塌陷遵循的规则：
①两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
②两个相邻的外边距是一正一负时，折叠结果是它们两者之和。
③两个相邻的外边距都是负数时，折叠结果是它们两者绝对值的较大值。
那么，如何解决这个问题呢？给这两个盒子可以分别放到两个不同的BFC中。此时，两个盒子的外边距都会渲染出来，也不会出现外边距重叠的问题。
<div class="container">
<div class="one"></div>
</div>
<div class="container">
<div class="two"></div>
</div>
<style>
.container {
overflow: hidden;
}
.one,
.two {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px;
}
</style>
②清除浮动
当父盒子没有设置高度，想让子元素的内容把父盒子的高度撑起来。但是子元素设置了浮动，就会脱离标准流，并不会撑起父元素的高度，使父元素的高度为0。
<div class="container">
<div class="one"></div>
</div> <style>
.container {
border: solid 2px rgb(0, 0, 0);
}
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
</style>
此时父元素只是2px的边框高度，子元素并没有撑开父盒子。想要解决这个问题，就触发父元素的BFC。给父元素添加一个 overflow: hidden来触发BFC。这样，父元素的高度就由子元素撑开了。
.container {
border: solid 2px rgb(0, 0, 0);
overflow: hidden;
}
③实现自适应三栏布局
左右两边两个盒子定宽，中间盒子随窗口大小自适应改变大小。
<div class="left">1</div>
<div class="right">3</div>
<div class="center">2</div>
<!-- 这里中间的盒子必须写在最后面，这样设置了左右两个盒子设置了左右浮动之后，不占位，中间的center盒子自动顶上去 --> <style>
.left {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.right {
width: 100px;
height: 100px;
background-color: pink;
float: right;
}
.center {
height: 100px;
background-color: skyblue;
overflow: hidden;
/* 开启BFC不受外边两个盒子的影响，自己形成一个独立的区域 */
}
</style>