Block Formatting Context （块格式化上下文）简称：BFC；它是W3C CSS 2.1 规范中的一个概念，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等；
要知道为什么会跑路，首先便了解BFC的布局规则：
☆
BFC布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
☆
一、什么情况下会产生block formatting context：
1、浮动元素（float: left | right）；
2、绝对定位元素（position: absolute | fixed）；
3、行内块元素（display: inline-block）；
4、表格的单元格（display: table-cells，TD、TH）；
5、表格的标题（display: table-captions，CAPTION）；
6、‘overflow‘ 特性不为visible 的元素（除非该值已经传播到viewport?）；
二、BFC的三个特性：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- BFC不会重叠浮动元素
- BFC可以包含浮动
三、如何使用BFC：
例：
<style type="text/css">
body {
margin: 0;
}
.red {
width: 200px;
height: 150px;
float: left;
background: red;
}
.green {
height: 200px；
width: 300px;
background: green;
}
</style>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
显示图：
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因此，此时即使在CSS的green里输入margin-top的值，它也是内嵌在一起，两个一起动。但我们可以通过清除浮动或触发green生成BFC， 来实现自适应两栏布局。
清除浮动：
.green{
clear: both;
}
触发green:
.green {
overflow: hidden;
}
显示图：
