BFC

含义：

block formatting context，即块元素独立排版环境。

满足条件：

• float属性不为none；
• position属性不为static和relative；
• overflow属性不为visible；
• display属性为下列之一：table-cell,table-caption,inline-block,flex,inline-flex；

最好的建立方式：

.container {
   overflow: hidden;
 }

作用：

利用BFC可以消除Margin Collapse
利用BFC去容纳浮动元素
利用BFC阻止文本换行

参考文章：

中文译文http://www.jianshu.com/p/fc1d61dace7b
英文原文：
https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/