一些元素，如float元素，如position为absolute,inline-block,table-cell或table-caption的元素，以及overflow属性不为visible的元素，它们将会建立一个新的块级格式化上下文。
BFC规则：
在块格式化上下文中
每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）
即使存在浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边，与普通元素重合）
除非这个元素也创建了一个新的BFC
让我们建立一个BFC
HTML代码如下：
<div class="container">
Some Content here
</div>
我们可以用CSS为container容器附加上述条件,如overflow: scroll, overflow: hidden, display: flex, float: left, or display: table.尽管这些条件都能形成一个BFC，但是它们各自却有着不一样的表现：
display: table : 在响应式布局中会有问题
overflow: scroll : 可能会出现你不想要的滚动条
float: left: 使元素左浮动，并且其他元素对其环绕
overflow: hidden: 消除溢出部分
这么看来，建立BFC的最好方式莫过于overflow:hidden了：
.container {
overflow: hidden;
}
