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的重叠

原文地址:https://www.cnblogs.com/controlms/p/7769399.html