BFC：（block formatting context）中文直译:块级格式化上下文；
BFC定义是页面中css渲染的一部分。主要用于“决定”盒子的布局以及浮动（相互影响范围）的一块区域。
在进行盒子元素布局的时候， BFC 提供了一个环境， 在这个环境中按照一定规则进
行布局不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素
的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
也就是说，如果一个元素符合了成为 BFC 的条件，该元素内部元素的布局和定位
就和外部元素互不影响(除非内部的盒子建立了新的 BFC)， 是一个隔离了的独立容器。
那么如何产生（触发）BFC 规则：
1）根源素
2) float 的值不为 none；
3) overflow 的值不为 visible；
4) display 的值为 table-cell、table-caption 和 inline-block 之一；
5) position 的值不为 absolute 或 fixed 中的任何一个；
触发BFC后，BFC的布局规则：
1）内部的块级元素在垂直方向上一个接一个的放置；
2）块级元素垂直方向margin重叠，取最大值，（在同一个BFC中的两个相邻元素）
3）每个元素的margin box的左边与包含块的border box左边接触。（即使浮动也是如此）
4）BFC区域不会与float重叠。
5）BFC是一个独立的区域（容器），容器内的子元素不会影响外面的元素。
6）计算BFC高度时。浮动元素也要参加。
7）只应用于BFC的子级元素。对产生BFC的元素不适用。