来看看MDN给的文档，BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
通俗理解来说就是，给触发BFC的元素一个边界，把浮动元素框起来。
下列方式会创建块格式化上下文：
- 根元素(
<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](https://drafts.csswg.org/css-display/#valdef-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，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
举个官方栗子
float
float的div脱离文档流（啥是文档流？），虽然是紫色的子级，但是浮动在紫色边框外。
但是如果给紫色div一个overflow:hidden，就会触发BFC，边界包裹float的div。
边界包裹
外边界塌陷
<div class="blue"></div>
<div class="red-inner">red inner</div>
.blue, .red-inner {
height: 50px;
margin: 10px 0;
}
两个相邻的外边距合并，可以触发BFC解决。
image.png
image.png
给下方的red-inner套一个父级BFC，即可
image.png
推荐使用官方文档的display: flow-root来触发BFC。
附赠清除float的几种方法
1.添加新的元素 、应用 clear：both；
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
.clear{clear: both;}
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>
2.父级div定义非visible的overflow
上文说的很清楚了，不多赘述。
3.使用伪元素来清除浮动
.clearfix:after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
4.使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
