CSS BFC 块级格式化上下文

tao

发布于2021-12-02 | 更新于2022-03-10

我理解的 BFC（块级格式化上下文）就是一个块级盒子，当它通过一定的方式成为一个 BFC 之后，其内部将作为一个独立的空间布局环境。

根据 MDN 上的描述下列的方式会创建格式化上下文：

根元素（<html>）
浮动元素（元素的float不是none）
绝对定位元素（元素的position为absolute或fixed）
行内块元素（元素的display为inline-block）
弹性元素（display为flex或inline-flex元素的直接子元素）
网格元素（display为grid或inline-grid元素的直接子元素）
overflow计算值不为visible的块元素
display值为flow-root的元素
表格单元格（元素的display为table-cell，HTML 表格单元格td、th默认为该值）
表格标题（元素的display为table-caption，HTML 表格标题caption默认为该值）

匿名表格单元格元素，元素的display为table、table-row、table-row-group、table-header-group、table-footer-group，分别是 HTML table、tr、tbody、thead、tfoot的默认属性或inline-table
contain值为layout、content或paint的元素
多列容器（元素的column-count或column-width不为auto，包括column-count为1）
column-span为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中

接下来我们看几个关于应用 BFC 的实际例子来加深对它的理解：

1.解决外边距重叠
正常布局中，两个块级盒子垂直排列时两者的外边距会发生重叠，没有内容将父元素与子元素隔开时两者的外边距会发生重叠，空的块级元素上下外边距会发生折叠。

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <p>Sibling 3</p>
</div>

.container {
  background-color: #909399;
  overflow: hidden;
}

p {
  background-color: #409eff;
  margin: 10px 0;
}

上面的代码中给

p

标签设置的外边距将会发生折叠：

现在修改第三个元素使它创建一个新的 BFC：

  <div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <!-- 创建 BFC -->
    <div style="overflow:hidden;">
      <p>Sibling 3</p>
    </div>
  </div>

2.避免文字环绕

  <div class="container">
    <div></div>
    <p>My bottomm argin collapses with my parent yielding abot tom argin of</p>
  </div>

    .container {
      width: 200px;
      height: 100px;
      background-color: #909399;
    }

    div {
      width: 30px;
      height: 39px;
      margin-right: 10px;
      background-color: #409eff;
      float: left;
    }

    p {
      width: 200px;
      margin: 0;
      color: #fff;
    }

现在改变p标签的样式创建一个新的 BFC：

    p {
      width: 160px;
      margin: 0;
      color: #fff;
      
      /*创建 BFC*/
      overflow: hidden;
    }

3.包含浮动
浮动元素会脱离正常文档流，如果一个没有高度的父元素的子元素是浮动元素，则父元素的高度不会被撑开：

  <div class="container">
    <div>Sibling 1</div>
    <div>Sibling 2</div>
  </div>

    .container {
      width: 200px;
      background-color: #909399;
      border: 1px solid #000;
    }

    .container div {
      width: 80px;
      height: 80px;
      margin: 10px;
      background-color: #409eff;
      color: #fff;
      float: left;
    }

现在改变父元素的属性创建一个新的 BFC：

    .container {
      width: 200px;
      background-color: #909399;
      border: 1px solid #000;
      /*创建 BFC*/
      overflow: hidden;
    }

父元素会将浮动元素包裹进去。

参考文章
1.什么是BFC