BFC 块级格式化上下文

前言

　　文档流主要分成三种，分别是普通流、定位流和浮动流。

　　普通流就是指BFC中的FC（formatting context）格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定其子元素如何布局，以及和其他元素之间的关系和影响。

　　常见的FC有BFC和IFC，而BFC是块级格式化上下文，用于布局块级盒子的一块渲染区域

【触发条件】

　　满足下列任何条件之一皆可以触发BFC

　　【1】根元素

　　【2】float的值不为none

　　【3】overflow的值不为visible

　　【4】display的值为inline-block、table-cell、table-caption

　　【5】position的值为absolute或fixed

【作用】

　　BFC是页面上的一个隔离的独立容器，容器中的子元素不会影响到外面的元素，反之亦然。

　　它与普通的块级框类似，但是不同之处在于：

　　【1】能够阻止元素被浮动元素覆盖

　　【2】可以包含浮动元素

　　【3】属于同一个BFC的两个相邻的块级子元素的margin会发生重叠。所以当两个相邻块级子元素分属于不同的BFC时能够阻止margin的重叠