CSS的BFC block formatting context (块级格式化上下文)

解释 ： 块级格式化上下文， 在浏览器中，创建一个独立的渲染区，该区域内的元素不会影响区域外的元素。

w3c 定义：  1.浮动，2，绝对定位，3，非块级元素的块级容器（

inline-blocks, table-cells, 和 table-captions

）4，overflow的值不是visiable 的块级元素

以上，都会为他们创建BFC 即 块级格式化上下文；

可以解决的问题举例如下（不限制于下）

1，解决竖直方向margin 塌陷问题（把其中一个盒子 包裹在bfc里面 例如加一个 overflow：hidden）

2，父亲容器（overFlow：hidden）（bfc）承出 浮动盒子父元素的的高度； 清除浮动的一种；

3，

在多列布局中使用BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

例如：

<div class="container">
    <div class="column">column 1</div>
    <div class="column">column 2</div>
    <div class="column">column 3</div>
</div>

对应的CSS：

.column {
    width: 31.33%;
    background-color: green;
    float: left;
    margin: 0 1%;
}
/*  Establishing a new block formatting 
    context in the last column */
.column:last-child {
    float: none;
overflow: hidden; 
}