No.21 BFC

在 W3C 的 css 2.1规范中,提出了一个概念-------格式化上下文(formatting context) , 它是页面中的一块渲染区域,并且有一套渲染规则,决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

 而 BFC (块级 格式化上下文) , 它属于"格式化上下文"的其中一种。具有BFC特性的元素可以看作是隔离了的独立容器,容器里的元素不会在布局上
 影响到外面的元素,而外面的元素也不会影响到里面的元素。

触发BFC的条件 (达成以下一个即可触发) :
1.float值为"none"时;
2.position值为"absolute"或"fixed"时;
3.display值为 inline-block \ table-cell \ flex \ table-caption 或 inline-flex 时;
4.overflow值非visible时。(overflow的默认值就是visible,相当于"none")

示例图：

均为 盒a、盒c 添加 100px 的 margin。