前言
文档流主要分成三种,分别是普通流、定位流和浮动流。
普通流就是指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的重叠