1.BFC中的英文全称是 block formatter context(块级格式化执行上下文)，是css里面的一种块级概念。
我们都知道。如果有一对父组关系的元素，如果子元素有原先的高度和宽度，并且设置为浮动元素脱离文档流。则父元素会因此造成高度塌陷，进而使元素的样式变得十分难看。
来演示一下代码
<div class="fath">
<div class="son"></div>
</div>
<style>
.fath{
width: 400px;
height: 30px;
background-color: blue;
}
.son{
width: 300px;
height: 200px;
background-color: aqua;
float: left;
}
</style>
由图可知在这样情况下，父元素的高度承载不下子元素。
那么，此时就是展现BFC作用的重要时刻。
bfc的几个重要特征：(是针对父元素设置的)
1.overflow的值设为hidden。
2.display的值设置为inline-block
3.position的值不是static和relative(也就是说是absolute和fix都行)
4.父元素float的值同样也不能为none。
由图可知，父元素的css样式只要满足如上的条件之一，父元素就能够形成与子元素一致的元素流，并根据子元素的宽高把自己的宽高给撑开。
为什么呢？在bfc盒子中，所有的样式有个块级作用域，只针对bfc盒子内的元素有效，与外部区域没有任何关系，
！！注意：将父元素设置为bfc时，父元素是不需要设置初始的宽高的。
bfc的其他作用。
还是一对父子元素。
body{
background-color: brown;
}
.fath{
width: 400px;
height: 400px;
background-color: blue;
}
.son{
margin-top: 20px;
width: 300px;
height: 200px;
background-color: aqua;
}
以上代码表示：我想要在子元素的顶部跟父元素的顶部有个20px的边距。可是代码写完会发现。
效果是这样的：
明显可知，在这个情况下，父元素与子元素一同产生与浏览器视口顶部的一段20px的边距。 也是因为盒子在使用margin时导致的margin塌陷。
此时通过bfc的是个特点任选其一在父元素的css中进行摄制，就能解决该问题。
