深入理解BFC

什么是BFC?

BFC,全称Block Formatting Context,翻译成中文“块级格式化上下文”。BFC=block-level box(块级元素) + Formatting Context(普通流,从上到下依次显示)。
BFC是一块独立的渲染区域,这块区域对外具有隔离特性,其子元素不会对外部其他元素产出影响。
通俗讲,BFC就是一个CSS属性,元素具有该属性后不能被开发者显式修改,且拥有这个属性的元素会表现一些特性。

BFC触发条件(5个)

  1. 根元素,即HTML元素
  2. float属性值不是none
  3. position属性值不是static或者positive
  4. overflow属性值不是visible
  5. display属性值是inline-block,table-cell,table-caption

BFC特性(6个)

  1. BFC内部块元素垂直方向一个接一个地放置。
  2. BFC内部块元素垂直方向距离由margin决定,同一个BFC内部相邻的两个块元素的margin会重叠。
  3. BFC区域不会float元素区域重叠
  4. 计算BFC高度时,浮动元素也参与计算
  5. BFC子元素margin box左边与包含块border box的左边相接触(从左到右的格式化,反之亦然)即使浮动元素也是如此。
  6. BFC区域是一个隔离的独立容器,容器里的子元素不会影响外面的元素。

BFC作用

  1. 自适应两列或者多列布局
  2. 清除浮动
  3. 阻止两个相邻Box的margin重叠
  4. 阻止元素被浮动元素覆盖