一、常见的定位方案

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

在普通流中，元素按照其在 HTML 中的先后位置至上往下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会独占一行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

在浮动布局中，元素会脱离普通流，同时会影响周边的元素，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边浮动，其效果与排版中的文本环绕。

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

二、BFC 概念

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它会渲染页面中的一块区域，并且有一套渲染规则，它将决定其子元素是如何定位，以及和其他元素的关系与相互之间的作用。

那么BFC它又是什么呢？

BFC全名为：Block Formatting Contexts(块级格式化上下文)，它属于上面定位的普通流。

被赋予BFC特性的元素，可以当作是独立的容器，容器里面的元素不会影响到外面的元素，并且BFC有着普通容器没有的特性

只需元素使用下面任意的条件就会触发BFC的特性

1、同一个BFC下的容器外边距会发生重合

如图所示，因为两个容器都处在BFC的容器(body)下，所以第一个容器的下边距与第二个的上边距进行了重合，所以两个盒子之间的距离并没有200px，而是100px。

这并不是CSS的bug，这可以说是一种规范，如果不像重合外边距的话，把两个容器分别放在不同的BFC容器中即可。
如图所示：

2、BFC可以包含浮动的元素(清除浮动) 我们都知道浮动会使元素脱离普通文档流
如图所示：

如果使用的是触发BFC的容器，则会包裹着浮动元素
下面是使用了BFC特性的请况：

3、BFC可以阻止元素被浮动元素覆盖
我们先来看下文字环绕的效果：

当给第二个元素添加BFC特性后，就将不会继续环绕：

以上是我对BFC的理解