BFC (Block Formatting Contexts)

块级格式化上下文
什么是Formatting context：（格式化上下文）是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
所有在常规流中的元素都仅属于一种格式化上下文（Inline formatting contexts 与 Block formatting contexts），它规定了该元素的渲染规则。

如何使一个元素触发bfc：
1、浮动元素：float除none以外的值
2、绝对定位元素：position（absolute、fixed）
3、display为inline-block、table-cells、flex, table-captions（包括这些但不限于这些）
4、overflow除了visible以外的值（hidden、auto、scroll）

BFC渲染规则

BFC元素是一个独立的渲染区域，只规定了内部的块级元素如何渲染布局，不会对外部造成任何影响
1、在BFC元素中，内部的块级元素从顶部开始一个接一个地垂直排列。
2、在BFC元素中相邻块级元素之间的垂直边距折叠（取最大的一个边距）。
3、BFC内部元素的左外边距（margin-left），与BFC元素的左边线（boder-left）相接触(对于从左往右的格式化的相反)。即使存在浮动也是如此。
4、BFC元素不会与浮动元素重叠（可以“看见”浮动元素）。