Chipmunk & Panda

-- 鼠熊部落格

All work and no play makes Jack a dull boy.

BFC——块格式化上下文

  前端  

MDN：块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

主要跟元素定位以及元素之间的关系有关。

什么是 BFC ？

BFC 是一个独立渲染区域，通俗一点来说，可以把 BFC 看作房间，房间内的人与房间外的人互不影响（当然现实中不是这样啦，过于为所欲为可能会被邻居投诉的）。

BFC 有以下特性（布局规则）：

  • 内部元素按垂直方向从上到下依次排列。

    1
    2
    3

  • 同一 BFC 内的相邻元素之间会发生 margin 重叠。

    下边距为 10px
    上边距为 20px，叠过了上方元素的下边距

  • BFC 内的浮动元素可以撑开盒子（可以用来清除浮动）。

    浮动子元素

  • BFC 之间不会重叠（这条特性重点在于 float 元素属于 BFC，故 BFC 不会与 float 元素发生重叠）。

    泾渭分明

触发 BFC 的方式

  • 根元素 <html>
  • float 属性取值非 none
  • position 属性取值为 absolute 或 fixed
  • display 属性取值为 inline-block、flex（以及 inline-flex）、grid（以及 inline-grid）、flow-root 以及一大堆跟表格有关的值（可见块格式化上下文）
  • overflow 属性取值不为 visible
  • ……（不常用）

用法

  • 防止元素被浮动元素覆盖

    浮动元素盖在上面
    与浮动元素划清界限

  • 清除浮动

    父元素高度为 0 看不见
    父元素高度被子元素撑开了

  • 防止垂直方向 margin 重叠

    • 父子元素

      子元素的上边距被父元素吞掉了
      父元素变为 BFC 后就不会吞掉子元素的边距了

    • 兄弟元素

      下边距为 10px
      上边距为 20px，叠过了上方元素的下边距
      下边距为 10px，外套一个 BFC，与下方元素隔开，边距不再重叠
      上边距为 20px