BFC是英文Block formatting contexts,这个概念最开始出现在CSS2.1，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作，中文翻译过来是“块级格式化上下文”。下面这句话是W3help有关BFC的解释。
在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。
本人在网上大致的找了找触发BFC的条件：
- "float"的值不是"none"
- "overflow"的值不是"visible"
- "display"的值是"table-cell"
- "table-caption",或"inline-block"
- "position"的值既不是"static"也不是"relative"
当我们在编写网页的时候有时候可能会遇到这样的问题；
当2个div嵌套的时候如下图：
它们的样式：
上述代码块运行结果如下：
我们有时候往往希望内部的div居于外部div的中心，调整一个元素的位置，第一个可以用绝对定位，第二个可以用相对定位，还有就是固定定位。一般我们首先想到的就是调内部div的margin，top和left。margin-top:50px;margin-left:50px;这2句代码能不能实现我们所期望的，下面是演示结果：
结果为什么外部div也会受到内部div的margin的影响呢？
最初，外层div的overflow属性为visible；可见，当我们去设置内部div的margin-top的时候，他没有触发BFC块级格式化上下文，所以看到的结果就是上面这种情况。
那么解决这个问题的方法
第一：给外部div的overflow属性设置成hidden，
第二：给外部div加上border
第三：给外部div的float属性设置成left；或者给内部div的float属性设置成left
第四：给外部div的display属性设置成table-cell;
第五：position设置为absolute
