Block Formatting Context

BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。所以我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。

例子：

    1、 一个元素浮动了，其父元素不浮动，那么父元素会塌缩；如果子元素和父元素都浮动，则父元素不会塌缩。演示demo

          现时理解：子元素具有float 属性后，导致父元素塌缩，当然它有了自己的BFC。如果再在父元素上增加浮动后，父元素也重新创建一个新BFC，两个不同的BFC，所有互相不会影响，估父元素不塌缩。

          当然父元素也可以加 oveflow: hidden || auto，也使自己不塌缩，原因也和上边一样，父元素也是创建一个新的BFC。

参考：

     javascript100--什么是CSS BFC(Block Formatting Context)

     w3cplus--深入理解BFC和Margin Collapse