1. BFC相关知识点

BFC，全称为 Block Formatting Context，即块级格式化上下文。它是 CSS 中的一种渲染模式，用于控制块级盒子的布局、定位、浮动等属性的表现。

在 BFC 中，每个盒子都按照一定的规则进行排列，不会与其它盒子重叠，形成一个独立的空间。具体来说，BFC 具有以下特性：
- 1. 内部的盒子会按照垂直方向顺序排列，且每个盒子的左边与其包含块的左边对齐（除非设置了偏移量）。
- 1. BFC 内部的盒子会从包含块的顶部开始排列，并且它们的高度会自动扩展，直到它们的底部达到包含块的底部或者其他的 BFC。
- 1. BFC 内部的盒子不会与浮动元素重叠，同时也不会与其它 BFC 的盒子重叠。
- 1. BFC 可以包含浮动元素，但是会使得 BFC 的高度扩展到浮动元素的底部。
BFC的触发条件：
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 positions 为 absolute 或 fixed）
- 行内块（inline-block）元素
- overflow 值不为 visible 的块元素
- 弹性元素（display 为 flex 或 inline-block 元素的直接子元素）
BFC 主要的应用场景包括：
- 清除浮动：BFC 可以包含浮动元素，当 BFC 的高度扩展到浮动元素的底部时，就可以避免出现父元素高度塌陷的问题。
- 解决外边距合并问题：当两个相邻盒子的 margin-top 和 margin-bottom 相遇时，会发生外边距合并的问题。但是，如果两个盒子属于不同的 BFC，它们的外边距就不会合并。
- 创建独立的空间：当需要创建一个独立的空间，避免其它元素的影响时，可以使用 BFC。例如，可以将一个元素设置为 BFC，避免它的浮动子元素影响其它元素的布局。

在实际的开发中，BFC 也存在一些缺点，主要包括以下几点：

对于布局不规则的盒子，会产生额外的定位和计算成本，从而影响页面的性能。

<style>
  .container {
    display: block;
    overflow: hidden; /* 创建 BFC */
  }
  .box {
    display: block;
    float: left;
    margin-right: 10px;
    width: 100px;
    height: 100px;
  }
  .box1 {
    height: 200px;
  }
  .box2 {
    width: 200px;
  }
</style>
<div class="container">
  <div class="box box1"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box box2"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

在使用 BFC 清除浮动时，需要特别注意其它影响布局的因素，例如盒子的 overflow 属性、position 属性等。

<style>
  .container {
    display: block;
    overflow: hidden; /* 创建 BFC */
  }
  .box {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

在使用 BFC 解决外边距合并问题时，可能会出现某些元素的外边距无法合并的情况，从而影响页面的布局。

<style>
  .container {
    display: block;
    overflow: hidden; /* 创建 BFC */
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: gray;
  }
  .box {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<div class="container">
  <div class="box"></div>
  <div class="box" style="margin-top: 0;"></div>
  <div class="box"></div>
</div>

在使用 BFC 创建独立的空间时，可能会导致某些元素的位置发生变化，需要特别注意元素的定位和大小。

<style>
  .container {
    display: block;
    overflow: hidden; /* 创建 BFC */
    position: relative;
    width: 200px;
    height: 200px;
    background-color: gray;
  }
  .box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box1 {
    top: 0;
    left: 0;
  }
  .box2 {
    bottom: 0;
    right: 0;
  }
</style>
<div class="container">
  <div class="box box1"></div>
  <div class="box box2" style="width: 50px; height: 50px;"></div>
</div>

2. 自定义 loading 效果

<div>
  <div class="mongolia" v-if="loadingCharts">
    <el-icon class="loading-icon"><Loading /></el-icon>
  </div>
</div>

const loadingCharts = ref(false)
setTimeout(() => {
  loadingCharts.value = true
}, 100)

.mongolia {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 9999;
}
.loading-icon {
  position: relative;
  top: 5px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

CSS知识点补充

1. BFC相关知识点

2. 自定义 loading 效果