概念
它规定了一块区域作为上下文，在里面的渲染规则，子元素将如何定位，以及和其他元素的关系和相互作用。
特点
BFC内部的元素和外部处于隔离状态，不会互相影响
触发 BFC
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
特性
- 同一个 BFC 下外边距会发生折叠
.section-1 {
border: 1px solid red;
margin: 10px;
}
.section-2 {
border: 1px solid blue;
margin: 20px;
}
<div class="section-1">section-1</div>
<div class="section-2">section-2</div>
效果图
图一
图二
- BFC 可以包含浮动的元素（清除浮动）
.section-3 {
border: 1px solid red;
width: 100%;
}
.section-block{
float: left;
height: 20px;
}
<div class="section-3">
<div class="section-block">section-block</div>
</div>
对于非BFC块的效果：
非BFC
为section-3加上over-flow属性使其变成BFC后:
BFC
所以BFC可以令浮动元素占据一定的高度
