BFC(Block Formatting Context)理解

BFC：即块级格式上下文；在创建BFC的情况下，则所属的作用环境就变成了一个独立的布局环境。

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

在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left) （对于从右到左的格式来说，则触碰到右边缘）。

如何创建BFC 当一个HTML元素满足下面条件的任何一点，

都可以产生Block Formatting Context：

• float的值不为”none” overflow的值不为”visible”
• display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
• position的值不为 “static” 或 “relative”中的任何一个