BFC

block formatting context 块级格式化上下文

浮动元素,绝对定位元素,非块级盒子的块级容器(inline-blocks,table-cells,table-captions),以及display不是visible的块级盒子.

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

在类container中添加类似 overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table 的规则来显示创建BFC。虽然添加上述的任意一条都能创建BFC，但会有一些副作用：

1、display: table 可能引发响应性问题

2、overflow: scroll 可能产生多余的滚动条

3、float: left 将把元素移至左侧，并被其他元素环绕

4、overflow: hidden 将裁切溢出元素

因而无论什么时候需要创建BFC，都要基于自身的需要来考虑。对于本文，将采用 overflow: hidden 方式：

BFC可以做什么呢？

利用BFC避免外边距折叠

BFC包含浮动

使用BFC避免文字环绕

在多列布局中使用BFC

BFC定义了如下布局规则：

内部的块元素会在垂直方向，一个接一个地放置。

块元素垂直方向的距离由margin决定。两个相邻块元素的垂直方向的margin会发生重叠。

每个元素的左外边距，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float元素的区域重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

overflow:hidden在布局时有神奇的治理布局塌方的功效。

1.嵌套布局内部块元素设置float:left时，导致外部元素塌方，高度为0的问题。

2、左右布局DIV，左侧DIV设置为float: left， 当右侧DIV高度超过左侧DIV时，右侧内容向左塌陷问题。