什么是BFC？如何应用？

定义

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

如果有人问你什么是BFC，你可以这么答：
1.块格式化上下文（block formatting content）
2.一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

个人理解：在我看来BFC就是用来解决高度塌陷、边框合并、元素覆盖等问题。

形成BFC的常见条件（方案）：

float属性不为none

position的值不是static或者relative；

overflow不为visible，比如scorll、auto、hidden

display为inline-block、table-cell、table-caption、flex、inline-flex、table-cpation

比如，如果box1是左浮动，想要box2能够正常展示，需要使用以下方法来生成BFC

<div class="box1"></div>
<div class="box2"></div>
.box1{
	float:left;
	background-color:pink;
}
.box2{
	overflow:hidden;/display:flex;/overflow:auto;/display:inline-block;/
	background-color:pink;
}

比如大盒子box3是float:left，里面的子盒son有高度，但是因为大盒子box3浮动了，感受不到里面的子盒son高度，所以大盒子box高度为0，如何解决？给box3开启BFC

<div class="box3">
	<div clas="son">1</div>
<div>
.box3{
	background-clor: grey;
	// 解决方案1：
	overflow:hidden;
	// 解决方案2：
	display:inline-block;
	// 解决方案3：
	position:absolute;
}
.son{
	float:left;
	width:100px;
	height:100px;
	background-color:skyblue;
}

疑问：
为什么有这么多的解决方案，因为每个方案都有局限性，不同情况用不同的方案。没有万能的方案，比如overflow:hidden会解决很多问题，但是文字溢出的时候会被隐藏。

结论：

开启BFC特点作用

1.开启BFC的元素不会被浮动元素覆盖

2.开启BFC的元素父子外边距不会合并

3.开启BFC的元素可以包含浮动的子元素（解决浮动高度塌陷）