BFC基本概念：块级格式化上下文。
BFC的原理：
- 在BFC这个元素的垂直方向的边距发生重叠；
- BFC的区域不会与浮动元素的box重叠，用来清除浮动；
- BFC在页面上是一个独立的容器，不受外部元素影响，也不影响外部元素；
- 计算BFC高度的时候浮动元素也会参与计算。
如何创建BFC？
overflow： hidden/auto
float： none
position的值不是relative，static
display：inline-block/table-cell 和table相关的
BFC的使用场景：
<!-- 实例题（根据盒模型解释边距重叠）：-->
<section id="sec">
<style>
#sec {
background: red;
overflow: hidden; /*添加这个属性会创建一个BFC（块级格式化上下文）*/
}
.child {
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
<article class="child">
</article>
</section>
<!--BFC垂直方向边距重叠-->
<section class="margin">
<style>
.margin {
background: pink;
overflow: hidden;
}
.margin > p {
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<!--解决边距重叠给子元素添加一个父元素（再给父元素创建一个BFC）-->
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
<!--BFC的区域不会与浮动元素的box重叠，用来清楚浮动(创建一个BFC解决与浮动元素重叠)-->
<section id="layout">
<style>
#layout{
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: yellow;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
<!--计算BFC高度的时候浮动元素也会参与计算（子元素即使是float也会参与高度计算）-->
<section id="float">
<style>
#float{
background: red;
/*overflow: auto;*/
float: left;
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">
我是浮动元素
</div>
</section>
如果此文对你有用请动动你的小手点个赞！谢谢！！！
