前言

👺无论面试还是实际工作中，都会遇到关于 BFC 的问题。

这里说的 BFC 不是外滩金融中心 (The Bund Finance Center)

而是CSS中的块级格式化上下文 (block formatting context)

💪举例说明 BFC 的行为和作用：

1.防止元素坍塌

 <div class="container">
    <div class="floated-element"></div>
  </div>

.container {
  background-color: lightgray;
}

.floated-element {
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}

由于，子元素浮动，导致父元素高度坍塌。

将容器元素的 overflow 设置为 auto 则创建了一个 BFC

当子元素浮动时，BFC可以阻止浮动到它的父元素之外。也就是说，父元素的高度将包括浮动元素的高度，而不会导致父元素坍塌。

.container {
  /* 创建 BFC */
  overflow: auto;
  background-color: lightgray;
}

2.边距折叠：

<div class="box"></div>
<div class="box"></div>

.box {
  margin: 20px;
  height: 100px;
  background-color: red;
}

块级盒子的垂直相邻边界会重合。

margin值的计算方法：

• 都为正，取最大；
• 有正有负，最大的正数+最小的负数
• 没有正数，零+最小负数

使用BFC可以消除 margin 重叠

 <div class="container">
    <div class="box"></div>
  </div>
  <div class="box"></div>

.container {
  overflow: auto;
}

.box {
  margin: 20px;
  height: 100px;
  background-color: red;
}

3.不被浮动元素覆盖

举例说明，两栏布局，防止文字环绕。

<div class="div1"></div>
<div class="div2">
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
    测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>

.div1 {
  float: left;
  width: 100px;
  background-color: pink;
  height: 100px;
}

.div2 {
  background-color: ghostwhite;
  height: 100vh;
}

通过 BFC 可以防止这种文字环绕的问题。

.div2 {
  background-color: ghostwhite;
  height: 100vh;
  overflow: hidden; 
}

🎯BFC（块格式化上下文）布局规则：

1. 内部的盒子，会在垂直方向上，一个接一个地放置。
2. 盒子的垂直边距，会发生折叠（除非被另一个 BFC 阻止）。
3. BFC 的区域，不会与浮动元素重叠。
4. BFC 在计算高度时，浮动元素也会参与计算。
5. BFC 的区域，不会被浮动元素覆盖。

💖可以通过以下方式来创建 BFC：

1.使用 overflow 属性：将容器元素的 overflow 属性设置为 auto、hidden、scroll 或 overlay，可以创建一个 BFC。常用的是将 overflow 设置为 auto。

.container {
  overflow: auto; /* 创建 BFC */
}

2.使用 float 属性：将元素浮动（float: left 或 float: right），也会创建一个 BFC。

.container {
  float: left; /* 创建 BFC */
}

3.使用 display 属性：将元素的 display 属性设置为 inline-block、table-cell、table-caption、flex 或 grid 等，也可以创建一个 BFC。

.container {
  display: inline-block; /* 创建 BFC */
}

4.使用 position 属性：将元素的 position 属性设置为 absolute 或 fixed，同样可以创建一个 BFC。

.container {
  position: absolute; /* 创建 BFC */
}

常用的是将容器元素的 overflow 属性设置为 auto，这是最常见的创建 BFC 的方式。当然，根据具体的布局需求，选择合适的方式来创建 BFC。

需要注意的是，只有容器元素才能创建 BFC，内部元素默认继承其所在的 BFC。另外，BFC 的创建会影响元素的布局行为和相互关系，需要根据具体情况进行选择和使用。

最后的话

以上，如果对你有用的话，不妨点赞收藏关注一下，谢谢 🙏

😊 微信公众号: OrzR3

💖 不定期更新一些技术类，生活类，读书类的文章。