什么是BFC

BFC (Block formatting context) 块级格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

具有BFC特性的的元素可以看做是一个隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC 的特性（功能）

1. 阻止垂直外边距（margin-top、margin-bottom）折叠
2. 包含浮动元素
3. 和浮动元素产生边界

BFC 的运用

1.包含浮动元素

在正常的文档流中，块级元素是从上到下，内联元素是从左往右的顺序排列。如果给元素添加浮动（flaot）或绝对定位（absolute）,那么元素就会脱离正常的文档流，并造成父元素高度塌陷的问题。这时候就可以让父元素变成 BFC。这种方法和 清除浮动的功能相似

生成 BFC 的方法常用的有

1. float的值不为none
2. overflow的值不为visible(常用overflow:hidden)
3. display的值为inline-block、table-cell、table-caption
4. position的值为absolute或fixed
5. display的值为flow-root(这个属性不会产生不正交的情况，但是兼容性不好)

更多查看MDN

2.阻止垂直外边距折叠

在正常的文档流中两个设置两个 div 分别设置 margin-bottom和margin-top 会发现两个 外边距会合并。 这时候把其中一个变为 BFC 就能解决外边距合并的问题

3.和浮动元素产生边界

在正常的文档流中设置两个div，并使其中的一个浮动会发现两个div会重叠，这时候让没有浮动的那个元素变成 BFC 就能决绝重叠的问题