BFC (Block Formatting Contexts)

MDN文档：块格式化上下文

简单来说：BFC 是页面上的一个独立渲染的区域，该区域会包含器内部的所有元素，并且区域内元素的渲染不会影响到区域外的元素，

在 MDN 中，创建 BFC 的有以下方式

常见应用

清除浮动

示例代码

<style>
  .wrap {
    border: 1px solid green;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin: 0 5px;
  }
</style>

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
</div>
 

如下图所示，父元素 wrap 的不能很好的包裹子元素 item

这时可以利用块格式化上下文的特性，使父元素成为一个块格式化上下文，这样就会自动的包裹子元素。给 wrap 添加 overflow 样式

.wrap {
  border: 1px solid green;
  overflow: auto;
}
 

效果如下

解决浮动遮挡问题

实例代码

<style>
  .box {
    width: 100px;
    aspect-ratio: 1 / 1;
    background-color: red;
  }
  .float {
    width: 50px;
    aspect-ratio: 1 / 1;
    background-color: skyblue;
    float: left;
  }
</style>

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

如上图显示，box 元素被浮动元素 float 遮挡住了。这时候可以使 box 元素成为块格式化上下文，不影响 float 元素的显示

.box {
  width: 100px;
  aspect-ratio: 1 / 1;
  background-color: red;
  overflow: auto;
}
 

效果如下

margin 垂直方向重叠问题

示例代码

<style>
  .wrap {
    border: 1px solid greenyellow;
    width: 100px;
  }
  .item {
    width: 100%;
    height: 100px;
    margin: 10px 0;
    background-color: skyblue;
  }
</style>
<div class="wrap">
  <p class="item"></p>
  <p class="item"></p>
</div>
 

如上图显示，相邻的 item 元素之间的 margin 重叠了，只计算渲染了其中一个(一般来说是取其两者间较大的值)。要使相邻元素之间的 margin 按设想的渲染，可以给其中一个元素的外层添加一个块格式化上下文。

<style>
  .wrap {
    border: 1px solid greenyellow;
    width: 100px;
  }
  .item {
    width: 100%;
    height: 100px;
    margin: 10px 0;
    background-color: skyblue;
  }
</style>
<div class="wrap">
  <p class="item"></p>
  <!-- 添加一个块格式化上下文避免 margin 叠加的问题 -->
  <div style="overflow: auto;">
    <p class="item"></p>
  </div>
</div>
 

显示效果如下