学习flow-root前，我们要先了解下BFC的概念。

在W3C规范中BFC是这样定义的：

浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为visiable的块级盒子，都会为他们的内容创建新的BFC。

在BFC中，盒子从顶端开始垂直的一个接一个地排列，两个盒子之间的垂直间隙是由他们的margin值决定的。

在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。对于从右到左的格式来说，则触碰到右边缘。

BFC的通俗理解为：

BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子，箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解是：BFC中的元素布局是不受外界的影响（我们往往利用这个特性来清除浮动元素对其非浮动的兄弟元素和其子元素带来的影响），并且在一个BFC中，一块和一行中所有的内联元素所组成的都会垂直的沿着其父元素的边框排列。