BFC是什么？
BFC定义
BFC（Block Formatting Context），块级格式化上下文，是一个独立的烘托区域，让处于BFC内部的元素与外部的元素彼此阻隔，使表里元素的定位不会彼此影响，举个比如阐明一下：
<div class="box1" id="bfc1">
<div class="box2"></div>
<div class="box3" id="bfc2">
<div class="box4"></div>
<div class="box5"></div>
</div>
</div>
上面的比如中，bfc1是一个BFC区域，包括box2，box3，bfc2也是一个BFC区域，包括box4，box5，可是bfc1不包括box4，box5，所以每一个BFC区域只包括子元素，不包括子元素的子元素。
每一个BFC区域都是彼此独立的，互不影响的。
触发BFC的条件
- body根元素，body就是一个BFC区域；
- 起浮，不包括none；
- 定位，肯定定位absolute或固定定位fixed（二者都具有行内块特色）；
- display为inline-block、table-cell、table-caption;
- overflow为hidden、scroll、auto，不为visible；
- 弹性布局flex。
任意满意以上一个条件，元素就成为了一个BFC。
BFC解决了什么问题？
1.外边距陷落问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
这里给两个盒子都加了外边距，可是两个盒子的垂直距离并不是50+50=100px，而是50px，发生了外边距陷落问题。
解决办法：将这两个盒子放入BFC区域中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bfc{
overflow: hidden;
}
.box{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 50px;
}
</style>
</head>
<body>
<div class="bfc">
<div class="box"></div>
</div>
<div class="bfc">
<div class="box"></div>
</div>
</body>
</html>
2.包括陷落问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.son{
width: 50px;
height: 50px;
background-color: hotpink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
当父元素包括子元素，子元素设置了外边距的时候，会把父元素也拉下来，如图：
为了解决这个问题，在父元素增加条件（如增加overflow:hidden;），把父元素变为BFC区域
3.清除起浮的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
background-color: aquamarine;
}
.son{
width: 50px;
height: 50px;
background-color: hotpink;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</body>
</html>
这里父元素没有设置高度，高度是由子元素撑开的，此刻想把子元素起浮，在.son增加float:left，作用如下：
此刻子元素起浮，父元素由于本身没有高度，看起来就消失了，为了解决这个问题，在在父元素增加条件（如增加overflow:hidden;），把父元素变为BFC区域
4.自动适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: hotpink;
float: left;
}
.box2{
width: 400px;
height: 300px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
粉色盒子左起浮，导致起浮元素掩盖在处于标准流的绿色盒子上，如果想不掩盖，在绿色盒子上加条件使之变为一个BFC，作用如下。
运用场景：绿色盒子根据粉色盒子自适应变化。
总结
要根据BFC的特色：BFC区域彼此独立，互不影响，在需求的地方运用。
