Howard的博客天地

深入理解块格式化上下文（BFC）及其应用场景

6/3/2021 CSS

上一篇写到盒子模型，接下来看看 BFC。

在前端开发中，块格式化上下文（Block Formatting Context，简称 BFC）是一个重要的概念，用于控制元素在页面中的布局和渲染方式。BFC 可以影响元素的尺寸、外边距、内边距以及浮动等属性的表现，使得页面布局更加灵活和可控。本文将介绍 BFC 的定义、创建条件、渲染规则以及应用场景。

# BFC 的定义和创建条件

根据 W3C 标准，BFC 是一个独立的渲染区域，内部的元素在布局和渲染上与外部元素互相隔离。BFC 的创建条件包括：

  1. 根元素：HTML 文档的根元素可以自动创建 BFC。
  2. 浮动元素：具有浮动属性（float 不是 none）的元素会创建 BFC。
  3. 绝对定位元素：使用绝对定位（position 为 absolute 或 fixed）的元素会创建 BFC。
  4. 行内块元素：设置 display 为 inline-block 的元素也会创建 BFC。
  5. 表格单元格：设置 display 为 table-cell 的元素，如 HTML 表格单元格，会创建 BFC。
  6. 表格标题：设置 display 为 table-caption 的元素，如 HTML 表格标题，会创建 BFC。
  7. 其他条件：还包括 overflow 值不为 visible 的块级盒子、弹性元素（display 为 flex 或 inline-flex 的元素）、网格元素（display 为 grid 或 inline-grid 的元素）等。

# BFC 渲染规则

BFC 具有一些独特的渲染规则，它们决定了元素在 BFC 中的布局和表现：

  1. 垂直方向边距重叠：在同一个 BFC 内，相邻元素的垂直方向边距会发生重叠。但是，不同 BFC 的元素之间的边距不会重叠。
  2. 阻止浮动影响：BFC 内的元素不会与浮动元素的 box 重叠，从而避免浮动导致的布局问题。
  3. 独立容器：BFC 是一个独立的容器，内部元素的布局不受外部元素的影响。
  4. 计算高度时包含浮动元素：计算 BFC 的高度时，浮动元素也会参与计算，从而避免高度塌陷问题。

# 应用场景

BFC 在页面布局和样式控制中有着广泛的应用场景，以下是一些常见的应用：

  1. 防止浮动导致高度塌陷：使用渲染规则 4，当子元素设置为浮动时，父元素设置为 BFC 可以防止父元素的高度塌陷。通过设置父元素的 overflow: hidden;，可以触发 BFC，从而撑开父元素的高度。
<div class="container">
  <div class="inner"></div>
</div>

.container {
  border: 10px solid red;
  overflow: hidden; /* 触发 BFC 并撑开高度 */
}

.inner {
  float: left; /* 导致高度塌陷 */
  background: #08bdeb;
  height: 100px;
  width: 100px;
}

添加 overflow 属性前： 渲染规则4前

添加 overflow 属性后：

渲染规则4后

  1. 避免外边距折叠：使用渲染规则 1 和 3， 相邻的块级元素同属一个 BFC 时，它们的外边距会发生折叠。通过为元素创建独立的 BFC，可以避免外边距折叠问题。
<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>

.container {
  background-color: green;
  overflow: hidden;
}

.inner {
  background-color: lightblue;
  margin: 10px 0; /* 外边距折叠 */
}

/* 修改成 */
<div class="container">
  <div class="inner">1</div>
  <div class="bfc">
    <!-- 使用 BFC 包裹，避免相邻元素外边距折叠 -->
    <div class="inner">2</div>
  </div>
  <div class="inner">3</div>
</div>

在实际开发中，理解 BFC 的概念和应用场景，能够帮助我们更好地控制页面布局和渲染效果，提高页面的可维护性和用户体验。

效果图：修改前。 渲染规则3前

修改后

渲染规则3后

  1. 自适应多栏布局：使用渲染规则 2，新的 BFC 不会与浮动的元素重叠，并根据浮动元素的宽度，自适应布局。
<style>
    body {
        width: 600px;
    }

    .aside {
        width: 200px;
        height: 200px;
        background: #444;
        float: left;
    }

    .main {
        height: 300px;
        background: #ccc;

				/* 变成BFC */
				overflow: auto;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

添加 overflow 属性前：

渲染规则2前

添加 overflow 属性后： 渲染规则2后

0.5px的线