2023 BFC 元素有什么用？

概念

BFC 概念
- 是一个独立的渲染区域，并且这个区域的子元素不会影响到外面的元素，计算 BFC 的高度的时候，浮动元素也参与计算。
BFC 的原理布局规则
- 是一个块级元素，块级元素会在垂直方向一个接一个的排列
- BFC 是一个独立容器，容器里面的子元素不会影响到外面的元素
- 计算 BFC 的高度时，浮动元素也参与计算高度
- BFC 的区域不会与float box重叠
- Box垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（除了 flex 和 grid）

如何创建 BFC

BFC 元素可以用以下方式创建

根元素，即 HTML 元素
float 的值不为 none
position 为 absolute 或 fixed
display 的值不为 block
overflow 的值不为 visible

如何设置 BFC 元素？建议使用 display: flow-root;（是给父元素加！！）

BFC 外边距重叠

例：两个 box 都设置了外边距为 50px，我们想要的效果是两个 box 相隔 100px，但实际上只有 50px，这就是边距重叠。解决部分就是给其中一个 box 加上 BFC。比如 display: inline-block;

2023-05-03-html_bfc1

<style>
  .box1 {
    background-color: #818181;
    width: 200px;
    height: 100px;
    margin-bottom: 50px;
  }

  .box2 {
    width: 100px;
    height: 200px;
    background-color: #fcd3d3;
    margin-top: 50px;
  }
</style>
<div class="main">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

解决办法

.box2 {
  width: 100px;
  height: 200px;
  background-color: #fcd3d3;
  margin-top: 50px;

  display: inline-block;
}

BFC 父元素高度塌陷

由于 box 是浮动元素，导致父元素 main 高度为 0
- 解决办法是使得 main 变成 BFC

2023-05-03-html_bfc2

<style>
  .box {
    background-color: #818181;
    width: 200px;
    height: 100px;
    float: left;
  }
</style>
<div class="main">
  <div class="box"></div>
</div>
</body>

解决办法

.mian {
  display: flex;
}

BFC 清除浮动

这里给 box2 添加 display: flex; 就可以了

2023-05-03-html_bfc3

<style>
  .box1 {
    background-color: #818181;
    width: 200px;
    height: 100px;
    float: left;
  }

  .box2 {
    /* display: flex; */
    width: 100px;
    height: 200px;
    background-color: #fcd3d3;
  }
</style>
<div class="main">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

解决办法

.box2 {
  display: flex;
  width: 100px;
  height: 200px;
  background-color: #fcd3d3;
}