BFC

大约 3 分钟

BFC

什么是BFC

BFC，全称 Block Formatting Context，中文翻译为“块级格式化上下文”。

BFC 是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

BFC 的布局规则：

内部的 Box 会在垂直方向，一个接一个地放置。
垂直方向上，两个相邻的 Box 的 margin 会重叠，取较大的一个。
每个 Box 的 margin box 的左边，与包含块的 border box 的左边相接触。
BFC 的区域不会与 float box 重叠。
BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算 BFC 的高度时，浮动元素也参与计算。

实际上在一个标准流中 body 元素就是一个天然的 BFC。

如何创建BFC

根元素，即 html 元素。
float 属性不为 none。
position 为 absolute 或 fixed。
display 为 inline-block、table-cell、table-caption 或 flex。
overflow 不为 visible。

上面只是一部分，详细可以参考 MDN。

BFC的应用

解决浮动元素引起的父元素高度塌陷问题。

  <div class="container use-bfc">
      <div class="float-item">浮动元素</div>
      <div class="text">这是一段文本内容。通过设置overflow:hidden创建BFC，父元素可以正确包裹住浮动元素。</div>
    </div>

 .container {
        margin: 20px;
        border: 2px solid #333;
        padding: 10px;
      }
      
      /* 使用BFC的容器 */
      .use-bfc {
        background: #eeffee;
        /* 创建BFC的方法之一：使用overflow:hidden */
        overflow: hidden;
      }

      .float-item {
        width: 100px;
        height: 100px;
        background: #ff9999;
        float: left;
        margin: 10px;
      }

      .text {
        color: #666;
      }

非浮动元素被浮动元素覆盖。

 <h3>1. 浮动元素覆盖普通元素：</h3>
    <div class="container">
      <div class="float-box">浮动元素</div>
      <div class="normal-box">普通元素（被浮动元素覆盖）</div>
    </div>

    <h3>2. 使用BFC避免被覆盖：</h3>
    <div class="container">
      <div class="float-box">浮动元素</div>
      <div class="bfc-box">使用BFC的元素（不会被覆盖）</div>
    </div>

 .container {
        margin: 20px;
        border: 2px solid #333;
        padding: 10px;
      }

      .float-box {
        width: 100px;
        height: 150px;
        background: #ff9999;
        float: left;
        margin-right: 10px;
      }

      /* 普通的非浮动元素 */
      .normal-box {
        width: 300px;
        height: 100px;
        background: #99ff99;
        margin: 10px;
      }

      /* 使用BFC的非浮动元素 */
      .bfc-box {
        width: 300px;
        height: 100px;
        background: #9999ff;
        margin: 10px;
        overflow: hidden; /* 创建BFC */
      }

      h3 {
        margin-top: 30px;
        color: #333;
      }

外边距折叠问题。

 <h3>1. 相邻元素的外边距折叠：</h3>
    <div class="container normal-container">
      <div class="note">两个盒子各有20px的上下外边距，折叠后只有20px间距：</div>
      <div class="box">盒子1</div>
      <div class="box">盒子2</div>
    </div>

    <h3>2. 使用BFC避免相邻元素外边距折叠：</h3>
    <div class="container bfc-container">
      <div class="note">通过创建BFC，两个盒子的外边距不会折叠，间距变为40px：</div>
      <div class="box-wrapper">
        <div class="box">盒子1</div>
      </div>
      <div class="box-wrapper">
        <div class="box">盒子2</div>
      </div>
    </div>

   .container {
        width: 300px;
        border: 2px solid #333;
        padding: 10px;
        margin: 20px;
      }

      /* 普通的盒子，会发生外边距折叠 */
      .normal-container .box {
        width: 100%;
        height: 100px;
        background: #ffcccc;
        margin: 20px 0;
      }

      /* 使用BFC避免外边距折叠 */
      .bfc-container .box-wrapper {
        /* 创建BFC */
        overflow: hidden;
      }

      .bfc-container .box {
        width: 100%;
        height: 100px;
        background: #ccffcc;
        margin: 20px 0;
      }

总结

所谓 BFC，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

触发 BFC 的方式有很多，常见的有：

设置浮动
overflow 设置为 auto、scroll、hidden
positon 设置为 absolute、fixed

常见的 BFC 应用有：

解决浮动元素令父元素高度坍塌的问题
解决非浮动元素被浮动元素覆盖问题
解决外边距垂直方向重合的问题