MDN 对 BFC 的描述
一个块级格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
触发BFC条件符合下面任何一条就行：
1、根元素或其它包含它的元素（略过不谈）
2、浮动元素 (元素的 float 不是 none)
3、绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4、内联块 (元素具有 display: inline-block)
5、表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6、表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7、具有overflow 且值不是 visible 的块元素，
8、display: flow-root （推荐使用）
9、column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
很多人看了MDN关于BFC概述，看不懂说的是什么意思，那么我们下面将结合代码清楚说明BFC有什么功能和作用。
1、作用1：父元素能包裹子元素
<div class="parent">
<div class="child"></div>
</div>
CSS:
.parent{
border: 10px solid red;
min-height: 10px;
}
.child{
background: green;
float:left;
width: 300px;
height: 100px;
}
看图可以知道，当子元素设置float时候，如果没有触发BFC就会导致父元素包裹不住子元素。那如何触发BFC？？？？
（1）、方法1：给父元素添加float（浮动）
.parent{
border: 10px solid red;
min-height: 10px;
float:left;
}
（2）、方法2：父元素绝对定位元素为absolute 或 fixed
.parent{
border: 10px solid red;
min-height: 10px;
position:absolute;
}
（3）、方法3：给父元素设置成内联块 ( display: inline-block)
.parent{
border: 10px solid red;
min-height: 10px;
display:inline-block;
}
（4）、方法4：给父元素设置表格单元格 或表格标题( display: table-cell或display: table-caption）
.parent{
border: 10px solid red;
min-height: 10px;
display: table-cell
}
（5）、方法5：给父元素设置overflow，值只要不是 visible（值可以是auto、hidden等）
.parent{
border: 10px solid red;
min-height: 10px;
overflow:auto;
}
（6）、方法6：给父元素设置display: flow-root （强烈推荐使用这个）
.parent{
border: 10px solid red;
min-height: 10px;
display:flow-root
}
（1）-（6）上述说的几种方法均能触发BFC，实现最终效果如下：
重点来了：当我们使用上述方法（方法6除外），就会导致一些我们不想要内容。例如我们只想父元素包裹子元素，如果给父元素添加浮动，才能触发BFC，明显这个父元素浮动不是我们想要的，那么怎么解决这个问题。我们可以使用方法6触发BFC而不会带来其他附加的影响，或者进行浮动清除。
作用2：兄弟之间划清界限
<div class="brother">哥哥</div>
<div class="brother2">弟弟</div>
CSS：
.brother{
width: 100px;
min-height: 200px;
border: 3px solid red;
}
.brother2{
min-height: 200px;
border: 5px solid green;
}
当给哥哥加上浮动之后，弟弟就会浮上来
.brother{
width: 100px;
min-height: 200px;
border: 3px solid red;
float:left;
}
如果想让哥哥和弟弟的界限分明，可以触发弟弟BFC，就能解决如下：
.brother2{
min-height: 120px;
border: 5px solid green;
display: flow-root; /*触发BFC*/
}
注意一点：BFC和清除浮动实现效果是一样的，但是两者不是一样东西。下面用清除浮动实现效果：
<div class="parent clearfix"> /*在父元素类中加上clearfix*/
<div class="child"></div>
</div>
CSS:
.parent{
border: 10px solid red;
min-height: 10px;
}
.child{
background: green;
float:left;
width: 300px;
height: 100px;
}
.clearfix:after{ /*清除浮动*/
content:'';
display:block;
clear:both;
}
