BFC

介绍

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

以下设置会产生BFC

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-coun 为 1）

以上引用来自MDN

我的理解

我们可以知道根元素<html>就是一个 BFC。当我们在页面中开启新的BFC，这就像在在旧 Html 中，开启了一个新的 Html 。这两个 Html 不能相互影响。

BFC的范围

  <div id="div_1" class="BFC">
    <div id="div_2">
      <div id="div_3"></div>
    </div>

    <div id="div_4">
      <div id="div_5"></div>
    </div>

    <div id="div_6" class="BFC">
      <div id="div_7"></div>
      <div id="div_8"></div>
    </div>
  </div>

这里有2个BFC：
- div_1 包括 div_2、div_3、div_4、div_5、div_6
- div_6 包括 div_7、div_8

使用

浮动定位和清除浮动时只会应用于同一个BFC内的元素。
浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。(不会重叠浮动元素)
外边距折叠也只会发生在属于同一BFC的块级元素之间。

测试

高度塌陷

  <style>
    .box {
      border: 10px solid red;
    }
    .left {
      width: 50px;
      height: 50px;
      background-color: aqua;
      float: left;
    }
  </style>
<body>
  <div class="box">
    <div class="left"></div>
  </div>
</body>

1_change

经典的高度塌陷。想解决它，利用上面的属性1。我们给 .box 添加上 overflow: hidden; 来开启BFC

2_change

清除前一个浮动的影响

  <style>
    .box1 {
      height: 100px;
      width: 100px;
      float: left;
      background: lightblue;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background: #eee;
    }
  </style>

<body>
  <div class="box1">左浮动</div>
  <div class="box2">awecscrsc
    dadaedaed
    adaedaedadaedewdrgvr
    vcercrcwcnciwenciwen
    wcwinciweicmweomcowe
  </div>
</body>

5_change

可以看到这里的 box1 出现了环绕的效果。这里清除前一个浮动的影响，可以使 box2 开启 BFC。

6_change

外边距折叠

  <style>
    .box1 {
      height: 100px;
      width: 100px;
      background: lightblue;
      margin: 50px;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background: #eee;
      margin: 50px;
    }
  </style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

10_change

可以看到这里上下边距出现了重叠。解决此方法可以给 box2 套一层 wrap。

  <style>
    .box1 {
      height: 100px;
      width: 100px;
      background: lightblue;
      margin: 50px;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background: #eee;
      margin: 50px;
    }

    .wrap {
      overflow: hidden;
    }
  </style>

<body>
  <div class="box1"></div>
  <div class="wrap">
    <div class="box2"></div>
  </div>
</body>

11_change

参考

块格式化上下文

深入理解BFC

学习 BFC (Block Formatting Context)

YBFACC / blog

BFC #16

BFC

介绍

我的理解

BFC的范围

使用

测试

高度塌陷

清除前一个浮动的影响

外边距折叠

参考