什么是块级格式上下文
块级格式上下文BFC(block formatting context)是一种规定渲染区域元素排列的规则，包括子元素如何定位以及和其它元素的作用关系。块级盒参与块级格式上下文。
块级格式上下文的渲染规则主要有以下几点：
1、触发该规则——浮动元素、绝对定位元素、非块级盒的块级容器[如行内块级元素(display:line-block)、表格单元格元素(display:table-cell)以及表格标题元素(display:table-caption)]以及overflow属性不为visible的元素。
2、排列规则：在BFC区域，块级元素在垂直方向由顶部从上至下依次堆叠，上下外边距折叠;在水平方向尽量向左边缘排列(对于从左往右的格式化)，即使存在浮动也是如此。
3、BFC在页面上一个隔离的独立容器区域，容器里面的子元素不会影响到外面的元素，反之亦然。
4、BFC不会与外部float box重叠。
5、BFC计算高度时包含浮动元素。
下面是利用块级格式上线文进行布局的实例：
一、自适应两栏布局
对于宽度不定的包含块，划分为两栏布局。要求左边(.aside)固定宽度的栏，右边(.main)宽度随整体宽度大小自适应。
<div class='container'>
<div class="aside"></div>
<div class="main"></div>
</div>
.container {
width: 500px;/* 宽度值可变化 */
}
.aside {
width: 100px;
height: 150px;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
需要右侧固定栏，可以通过左浮动来实现。
.aside {
float: left;
}
由于浮动元素脱离了正常文档流，用户代理在渲染时，会导致正常的块级元素“看不到”浮动元素。在视觉堆叠层面，就像浮动元素“漂浮”到了块级元素前面。BFC不会与外部float box重叠，而通过设置 .main { overflow: hidden;}将右侧元素(.main ) 转换为块级格式上下文，实现实现两栏分栏排列。
二、清除内部浮动对布局的影响
<div class='container'>
<div class="floatBox"></div>
<div class="floatBox"></div>
</div>
.container {
width: 800px;
}
.floatBox {
width: 300px;
height: 200px;
background: #afaf00;
float: left;
}
由于浮动浮动，从正常文档流中脱离，导致容器（ .container）高度塌陷，在控制台中查看元素可以发现容器高度为0。根据BFC布局规则，计算块级格式上下文高度时，需要包含浮动元素。故而通过将容器增加属性overflow:hidden将其排布规则遵循块级格式上下文，这样容器（ .container）高度就包含了浮动元素。
三、防止外间距折叠
由于BFC在页面上一个隔离的独立容器区域，容器里面的子元素不会影响到外面的元素，所以可以通过将元素至于BFC区域来脱离外部元素之间的影响，譬如避免外边距的折叠。
<div class='container'>
<div class="Box"></div>
<div class="Box"></div>
</div>
.container {
width: 800px;
}
.Box {
width: 300px;
height: 200px;
background: #afaf00;
margin:10px;
}
很明显，上面两个子元素（.Box）的margin发生了折叠，两个元素的上下之间内容盒间距实际只有10px。
<div class='container'>
<div class='BFC'>
<div class="Box"></div>
</div>
<div class="Box"></div>
</div>
.BFC{
overflow:hidden;
}
通过对子元素包裹一个块级格式上下文，可以避免外间距的折叠。
W3C官网对于块级格式上下文（block formatting context）原文定义如下：
Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
For information about page breaks in paged media, please consult the section on allowed page breaks.
译文：
浮动元素、绝对定位元素、非块级框的块级容器（如内联块级元素inline-block、表格单元格table-cells以及表格标题table-captions）以及overflow属性具有除visible以外值的块级框（除非该值作用到了视口）为它们的内容创建了新的块级格式化上下文。
在块级格式上下文中，盒将从包含块的顶部开始垂直地一个挨一个地排列。两个兄弟盒之间的垂直距离由‘margin’属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。
在块级格式上下文中，每一个盒的左外边缘与包含块的左边缘接触(对于从右到左的格式，右边缘接触)。即便存在浮动也是如此(尽管盒的行框可能由于浮动而缩小)，除非盒建立了新的块格式化上下文(在这种情况下，盒本身可能会由于浮动而变窄)。
有关分页媒体中分页符的信息，请查阅有关允许的分页符的部分。
