No2.《彻底搞清楚 BFC》BFC 这一概念对我们学前端的来说并不陌生，甚至在平时开发中也是经常遇到的，之前我对这个知

站长

2024年10月16日 19:47 · 阅读数 49

前几天在看面试八股文时，看到了一个题目：请描述 BFC 的定义及的作用？

看到这个问题时它的答案随即出现在我的脑海中，不可否认，我当时对这个概念是懵懵懂懂的，很多时候都是在网上一些博客文章中看到的，大多数都是介绍了这个概念以及作用，即：知其然，不知其所以然。所以想通过一些官方文档结合案例彻底搞明白其中的原理。

之前在看张鑫旭的《CSS世界》这本书时偶然看到过对 BFC 的解释，其中对 BFC 是这么理解的：

CSS 世界的结界 —— BFC

“结界” 一词相信我们都不陌生，很多仙侠小说/影视剧中都有体现，很好理解，就是分为了内外两个空间，二者互不干扰。

除了查阅书籍，还去看了 MDN 和 W3C官方文档，以下就是对相关概念的一个总结:

   MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context
   
   W3C：https://www.w3.org/TR/CSS2/visuren.html

1. 认识 FC

FC 的全称是 Formatting Context，即格式化上下文。

W3C 文档中有这样一句描述（9.4章节）：

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

从这段话中可以提取出几个重要信息：

在普通文本流中，所有盒子/元素都属于格式化上下文
元素要么是块级，要么是内联级，不能同时是二者
块级元素的布局属于 Block Formatting Context（BFC）
行内级元素的布局属于 Inline Formatting Context（IFC）

既然知道了 BFC 的概念了，那在 html 中，怎么样才是一个 BFC 呢，或者怎么才能创建一个 BFC 呢？我在 MDN 中看了下创建 BFC 的方式有以下几种：

文档的根元素（ html ）
浮动元素（值不为 none）
绝对/固定定位元素（值为 absolute 或 fixed）
行内块元素（display 值为 inline-block 的元素）
表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow 值不为 visible 或 clip 的块元素
display 值为 flow-root 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

2. BFC 的功能

再看一下 w3c 官方文档对 BFC 功能的描述（9.4.1章节）：

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the margin properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats)

简单概括如下：

在 BFC 中，元素会在垂直方向上一个挨着一个的排列；
垂直方向上的间距由 margin 属性决定；
在同一个 BFC 中，相邻两个元素之间的 margin 会折叠（collapse）
在 BFC 中，每个元素的左边缘是紧挨着包含块的左边缘的；

3. BFC 的作用一：解决外边距合并

先看一个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        height: 100px;
        margin-bottom: 100px;
        background-color: #f18;
      }

      .box2 {
        height: 100px;
        margin-top: 50px;
        background-color: #f81;
      }
    </style>
  </head>
  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </body>
</html>

No2.《彻底搞清楚 BFC》BFC 这一概念对我们学前端的来说并不陌生，甚至在平时开发中也是经常遇到的，之前我对这个知

可以看出 box1 和 box2 之间的 margin 是 100px，做了合并，因为它们都处于 html 创建的 BFC 中。前面说过，每个 BFC 都是一个独立的 “结界”，所以只要 box1 和 box2 处于不同的 “结界” 中，它们的间距就互不影响。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        overflow: auto;
      }

      .box1 {
        height: 100px;
        background-color: #18f;
        margin-bottom: 100px;
      }

      .box2 {
        height: 100px;
        background-color: #f81;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <!-- container 创建了一个新的 BFC，box1 属于这个BFC -->
    <div class="container">
      <div class="box1"></div>
    </div>
    <!-- box2 属于 html 根元素创建的 BFC 中，box1 和 box2 不属于同一个 BFC，所以 margin 不会合并 -->
    <div class="box2"></div>
  </body>
</html>

No2.《彻底搞清楚 BFC》BFC 这一概念对我们学前端的来说并不陌生，甚至在平时开发中也是经常遇到的，之前我对这个知

4. BFC 的作用二：解决浮动高度塌陷

之前看很多关于 BFC 的文章时，都提到了 BFC 可以解决浮动高度塌陷，可以实现清除浮动效果。

再看一个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .container {
            /* position: relative; */
            background-color: #13c657;
        }

        .box {
            float: left;
            /* position: absolute; */
            width: 200px;
            height: 200px;
            background-color: #f81;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

浮动会导致父元素高度塌陷：

No2.《彻底搞清楚 BFC》BFC 这一概念对我们学前端的来说并不陌生，甚至在平时开发中也是经常遇到的，之前我对这个知

绝对定位也会导致父元素高度塌陷：

No2.《彻底搞清楚 BFC》BFC 这一概念对我们学前端的来说并不陌生，甚至在平时开发中也是经常遇到的，之前我对这个知

上面例子可以看到，浮动和绝对定位都会让父元素高度塌陷。既然如此，不管是在八股文还是其他技术文章中都只是说可以解决浮动导致父元素高度塌陷，但是并没有说可以解决绝对定位导致的父元素塌陷问题。

ok，先把这个问题放置一边，既然 BFC 可以清除浮动（解决父元素高度塌陷），那就浅试一下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .container {
            display: inline-block;
            /* position: relative; */
            background-color: #13c657;
        }

        .box {
            float: left;
            /* position: absolute; */
            width: 200px;
            height: 200px;
            background-color: #f81;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

我分别试了下使用 BFC 来解决浮动和绝对定位导致父元素高度塌陷，二者结果如下：

No2.《彻底搞清楚 BFC》BFC 这一概念对我们学前端的来说并不陌生，甚至在平时开发中也是经常遇到的，之前我对这个知

为啥 BFC 可以解决浮动带来的父元素高度塌陷问题而无法解决绝对定位导致的父元素高度塌陷呢？

继续阅读文档，里面有对父元素触发BFC，并且高度为 "Auto" ，使用浮动或定位时父元素高度计算的方式（10.6.7章节）：

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

对描述简单抽取总结为：

如果子元素全都为行内级元素，则高度为元素顶部到底部的距离；
如果子元素有块级元素，则为顶部盒子的上边缘和底部盒子的下边缘之间的距离；
如果有绝对定位元素，将被忽略
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

事实上，BFC 解决高度塌陷需要满足两个条件：

浮动元素的父元素触发 BFC，形成独立的块级格式化上下文
浮动元素的父元素高度为 auto；

我们知道，浮动和绝对定位都会让元素脱离文档流，但是二者存在区别，个人认为，浮动元素可以通过父元素触发 BFC 来解决高度塌陷也是因为子元素即使脱离文档流，但是还是在父元素内，也会影响父元素内的布局（常见的文本围绕图片）；而使用绝对定位时，子元素已经完全不在父元素中（通过z-index决定层级），更不会影响父元素内的布局，这样即使父元素触发 BFC，子元素也是在这个 “结界” 之外了。

以上就是我对 CSS 中 BFC 这一知识点的总结整理，希望可以带给各位 coder 不一样的的理解，谢谢！

转载自:https://juejin.cn/post/7404778537741762599