BFC（Block Formatting Context）就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
BFC 生成条件
根元素（
<html>）浮动元素，元素的 float 属性值不是
none绝对定位元素，元素的 position 属性值为
absolute或fixed行内块元素，元素的 display 属性值为
table-cell，表格单元格默认此值表格标题，元素的 display 为
table-caption，表格标题默认此值匿名表格单元格元素，元素的 display 为
tabletable-rowtable-row-grouptable-header-grouptable-footer-group，分别是 table row tbody thead tfoot 的默认属性，或inline-tableoverflow 不为
visible的块元素display 值为
flow-root的元素contain 值为
layoutcontentpaint的元素弹性元素，display 值为
flexinline-flex元素的直接子元素网格元素，display 值为
gridinline-grid元素的直接子元素多列容器，元素的 column-count 或 column-width 不为
auto，包括column-count为 1column-span为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中
BFC 容器的作用
1. 清除元素内部浮动
在一个容器中，如果包裹的是一个浮动元素，那么该容器的高度为 0，因为浮动元素脱离了正常的文档流，无法撑起父元素。
解决方法：
- 使用
overflow: auto
设置 overflow: auto 会创建一个新的 BFC 来包含这个浮动。overflow: auto 告诉浏览器如何处理溢出的内容，容器就会把任何子元素包含进去。
但是该属性可能会出现一些不想要的问题，比如滚动条或者一些剪切的阴影。
- 使用
display: flow-root
这是一个新的 display 属性值，它可以创建无副作用的 BFC。给父级块设置 display: flow-root，其内的所有元素都会参与 BFC，浮动的内容就不会从底部溢出。
2. 解决外边距合并
通过创建新的 BFC 避免两个相邻 <div> 之间的 外边距合并问题
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
.blue,
.red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-outer {
overflow: hidden;
background: red;
}
3. 自适应布局
<section>
<div class="float">Try to resize this outer float</div>
<div class="box">
<p><code>display:flow-root</code></p>
<p></p>
</div>
</section>
section {
height: 150px;
}
.box {
display: flow-root;
background-color: aliceblue;
border: 5px solid steelblue;
}
.float {
float: left;
width: 200px;
height: 100px;
margin-right: 25px;
padding: 10px;
overflow: hidden; /* required by resize:both */
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid black;
resize: both;
}
