BFC
1、什么是BFC
BFC是块格式化上下文的意思，指在浏览器中创建一个独立的渲染区域，在该区域中无论如何布局都不会影响到区域外的元素不会v，并且这个渲染区域只对块级元素起作用。
2、常见触发方式
1）浮动元素
float属性值不为none
2）绝对定位元素
position的属性值为absolute或者fixed
3）overflow不为visible的块级元素
4） display为inline-block,table-cell,table-caption,flex,inline-flex
3、应用场景
1）清除内部浮动
可参考父盒子添加overflow清除浮动
2）解决margin叠加的问题
一般情况下，当盒子上下排列的时候，上盒子magin-bottom:100px，下盒子margin-top：100px，此时两个盒子叠加，间距之后100px。为了解决这个问题，我们就要出发BFC，给其中一个盒子添加父级元素
<style>
/* 注释掉表示触发BFC前 */
/* .div1 {
overflow: hidden;
} */
.div2 {
width: 200px;
height: 200px;
background-color: rgb(210, 231, 250);
margin-bottom: 100px;
}
.div3 {
width: 200px;
height: 200px;
background-color: bisque;
margin-top: 100px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3"></div>
</body>
（ 图一 触发前 ） （ 图二 触发后 ）
由图可知，触发了BFC之后，两个盒子之间的间距变成了200px
3）自适应两栏布局
用BFC先设置右侧overflow:hidden;，再设置左侧float: left;
<style>
.div1 {
position: relative;
width: 100%;
}
.div2 {
width: 300px;
height: 220px;
background-color: rgb(210, 231, 250);
float: left;
}
.div3 {
width: 200px;
height: 200px;
background-color: bisque;
overflow: hidden;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
