BFC

一些元素，如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;
}

理解CSS中的BFC(块级可视化上下文)