MDN 对 BFC 的描述
一个块级格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

触发BFC条件符合下面任何一条就行：
1、根元素或其它包含它的元素（略过不谈）
2、浮动元素 (元素的 float 不是 none)
3、绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4、内联块 (元素具有 display: inline-block)
5、表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6、表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7、具有overflow 且值不是 visible 的块元素，
8、display: flow-root （推荐使用）
9、column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

很多人看了MDN关于BFC概述，看不懂说的是什么意思，那么我们下面将结合代码清楚说明BFC有什么功能和作用。

1、作用1：父元素能包裹子元素

<div class="parent">
  <div class="child"></div>
</div>

CSS:

.parent{
  border: 10px solid red;
  min-height: 10px;
}
.child{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

没有触发BFC时候

看图可以知道，当子元素设置float时候，如果没有触发BFC就会导致父元素包裹不住子元素。那如何触发BFC？？？？

（1）、方法1：给父元素添加float（浮动）

.parent{
  border: 10px solid red;
  min-height: 10px;
  float:left;
}

（2）、方法2：父元素绝对定位元素为absolute 或 fixed

.parent{
  border: 10px solid red;
  min-height: 10px;
  position:absolute;
}

（3）、方法3：给父元素设置成内联块 ( display: inline-block)

.parent{
  border: 10px solid red;
  min-height: 10px;
  display:inline-block;
}

（4）、方法4：给父元素设置表格单元格 或表格标题( display: table-cell或display: table-caption）

.parent{
  border: 10px solid red;
  min-height: 10px;
  display: table-cell
}

（5）、方法5：给父元素设置overflow，值只要不是 visible（值可以是auto、hidden等）

.parent{
  border: 10px solid red;
  min-height: 10px;
  overflow:auto;
}

（6）、方法6：给父元素设置display: flow-root （强烈推荐使用这个）

.parent{
  border: 10px solid red;
  min-height: 10px;
  display:flow-root
}

（1）-（6）上述说的几种方法均能触发BFC，实现最终效果如下：

触发BFC

重点来了：当我们使用上述方法（方法6除外），就会导致一些我们不想要内容。例如我们只想父元素包裹子元素，如果给父元素添加浮动，才能触发BFC，明显这个父元素浮动不是我们想要的，那么怎么解决这个问题。我们可以使用方法6触发BFC而不会带来其他附加的影响，或者进行浮动清除。

作用2：兄弟之间划清界限

<div class="brother">哥哥</div>
<div class="brother2">弟弟</div>

CSS：

.brother{
  width: 100px;
  min-height: 200px;
  border: 3px solid red;
}
.brother2{
  min-height: 200px;
  border: 5px solid green;
}

没有浮动情况

当给哥哥加上浮动之后，弟弟就会浮上来

.brother{
  width: 100px;
  min-height: 200px;
  border: 3px solid red;
  float:left;
}

哥哥浮动时候

如果想让哥哥和弟弟的界限分明，可以触发弟弟BFC，就能解决如下：

.brother2{
  min-height: 120px;
  border: 5px solid green;
  display: flow-root;  /*触发BFC*/
}

触发弟弟的BFC

注意一点：BFC和清除浮动实现效果是一样的，但是两者不是一样东西。下面用清除浮动实现效果：

<div class="parent clearfix">   /*在父元素类中加上clearfix*/
  <div class="child"></div>
</div>

CSS:

.parent{
  border: 10px solid red;
  min-height: 10px;
}
.child{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

.clearfix:after{      /*清除浮动*/
  content:'';
  display:block;
  clear:both;
}

清除浮动实现效果

总结：我们平时可以不使用BFC也能实现父元素包裹子元素功能，如清除浮动或者给父元素添加border造围墙等，同时也能利用flex布局实现兄弟分布效果。事实上，以前项目中用得比较多BFC实现功能，随着前端发展，现在项目都是用得比较少了（因为BFC有时候会附带其他副作用），毕竟能实现方法很多。