当前位置：首页 > article >正文

什么是 BFC

article 2025/2/23 6:00:29

什么是 BFC

BFC 全称是块级格式化上下文（Block Formatting Context），你可以把它想象成一个“独立王国”。在网页布局里，每个元素都有自己的一套规则来摆放和显示，而 BFC 就是一个特殊的“小世界”，里面的元素按照特定的规则来布局，并且和“小世界”外面的元素相互隔离，互不干扰。

怎么触发 BFC

有好几种方式能让一个元素变成这个“独立王国”，也就是触发 BFC：

元素浮动（float 值为 left 或者 right），就好像这个元素“飘”起来了，自己形成了一个小范围。
元素绝对定位（position 值是 absolute 或者 fixed），它脱离了正常的文档流，自成一派。
行内块元素（display 值为 inline-block），它既像行内元素一样可以在一行显示，又有块级元素的一些特性，也能触发 BFC。
表格单元格（display 值为 table-cell），表格单元格也有自己独特的布局规则，能创建 BFC。
元素的 overflow 属性值不为 visible，比如设置成 hidden、auto 或者 scroll 等，这样元素就会把自己包裹起来，形成一个独立的空间。

BFC 的作用

1. 清除浮动

在网页布局里，浮动元素会脱离正常的文档流，就好像“离家出走”了一样。如果一个父元素里面的子元素都浮动了，父元素就没办法知道子元素到底占了多大空间，它的高度就会变成 0，这就是所谓的高度塌陷。而触发 BFC 就可以解决这个问题，让父元素“管住”浮动的子元素。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* 父元素 */
        .parent {
            border: 2px solid red;
            /* 触发 BFC */
            overflow: hidden; 
        }
        /* 浮动的子元素 */
        .child {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

在这个例子里，.child 元素设置了浮动，要是 .parent 元素没有触发 BFC，它的高度就会变成 0，红色的边框就会“塌”在一起。但当给 .parent 元素加上 overflow: hidden 触发 BFC 后，父元素就能包含浮动的子元素，显示出正常的高度和边框。

2. 防止外边距重叠

在普通的文档流里，相邻的块级元素之间的外边距（margin）会重叠。什么意思呢？就是说两个相邻的元素，它们的外边距不会相加，而是取其中较大的那个值。但如果把其中一个元素放到 BFC 里面，这种外边距重叠的情况就不会发生了。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* 普通的块级元素 */
        .box {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin: 20px;
        }
        /* 触发 BFC 的包装元素 */
        .bfc-wrapper {
            /* 触发 BFC */
            overflow: hidden; 
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="bfc-wrapper">
        <div class="box"></div>
    </div>
</body>

</html>

这里有两个 .box 元素，第一个 .box 在正常的文档流里，第二个 .box 被包在 .bfc-wrapper 里面，而 .bfc-wrapper 触发了 BFC。如果没有这个 BFC，两个 .box 元素之间的距离就只会是 20px（取较大的外边距）。但现在第二个 .box 在 BFC 里，它们之间的距离就变成了 40px（20px + 20px），外边距就不会重叠了。

3. 自适应两栏布局

我们经常会遇到一种布局需求，就是一侧宽度固定，另一侧宽度自适应剩余空间。利用 BFC 就能轻松实现这种布局。

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* 左侧固定宽度的元素 */
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* 右侧自适应宽度的元素 */
        .right {
            /* 触发 BFC */
            overflow: hidden; 
            height: 200px;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>