BFC(Block Formatting Context )， 块级格式化上下文，是一个一个独立的渲染区域，让处于BFC内部的元素与外部元素相互隔离，是内外元素的定位不会相互影响。

触发条件

  • overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
  • 浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
  • 定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。

  • display为inline-block, table-cell, table-caption, flex, inline-flex

    BFC的布局规则

  • 浮动的元素会被父级计算高度(父级元素触发了BFC)

  • 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
  • margin不会传递给父级(父级触发BFC)
  • 属于同一个BFC的两个相邻元素上下margin会重叠

应用场景

  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖