CSS BFC特性和应用

目录

• 1，介绍
• 2，BFC布局规则
• 3，创建BFC
• 4，BFC应用
• • 1，浮动子元素使父级高度坍塌
  • 2，非浮动元素被浮动元素覆盖
  • [3，margin 合并](#3，margin 合并)
  • • [1，父子 margin 合并：父级和第1个/最后1个子元素](#1，父子 margin 合并：父级和第1个/最后1个子元素)
    • [2，相邻兄弟元素的 margin 合并](#2，相邻兄弟元素的 margin 合并)

1，介绍

BFC 就是页面上一块独立的容器，内部有自己的渲染布局规则。容器内外的元素不会相互影响。

2，BFC布局规则

1. 内部的元素，在垂直方向上会依次放置。
2. 元素在垂直方向上的距离由 margin 决定，同一个 BFC 的两个相邻元素的 margin 会重叠。
3. BFC 区域不会和外部浮动元素重叠。
4. 计算 BFC 高度时，浮动子元素也参与运算。

在标准流中的根元素 html 就是一个天然的 BFC 环境。

3，创建BFC

简单介绍下最常用的，更多的创建方式参考MDN-BFC。

属性	属性值
float	不为 none
position	absolute 或 fixed
display	inline-block、flow-root、flex、grid、 table 等
overflow	不为 visible 或 clip 的块级元素

无论哪种方式创建的BFC，都有一定的副作用。

只有 display: flow-root 是无副作用的，它的行为如同 root（在浏览器中是 html ）元素。

4，BFC应用

1，浮动子元素使父级高度坍塌

<style>
  .container {
    border: 2px solid black;
  }
  .item {
    float: left;
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
</style>

<body>
  <div class="container">
    <div class="item"></div>
  </div>
</body>

表现：

解决：只需要将父元素设置为 BFC 即可。

.container {
  display: flow-root;
}

2，非浮动元素被浮动元素覆盖

对于浮动元素的特性来说，这是正常现象。

<style>
  .box1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid black;
  }
  .box2 {
    border: 2px solid red;
  }
</style>

<body>
  <div class="box1"></div>
  <div class="box2">求关注，下雪天的夏风</div>
</body>

表现：

但我们不想让非浮动元素 box2 被覆盖，所以可设置 box2 为 BFC 来解决。

.box2 {
  display: flow-root;
}

上面这种就是经典的两列布局实现方式之一。

3，margin 合并

MDN参考

margin 合并的3种情况，BFC可以解决前2种

1. 父子 margin 合并：父级和第1个/最后1个子元素
2. 相邻兄弟元素的 margin 合并
3. 空块级元素的 margin 合并

1，父子 margin 合并：父级和第1个/最后1个子元素

<style>
  .container {
    background-color: skyblue;
  }
  .item {
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: salmon;
  }
</style>

<div>求关注，下雪天的夏风</div>
<div class="container">
  <div class="item"></div>
</div>

表现：父级"掉"下来了：

解决方式之一，就是将父级设置为 BFC。

.container {
  display: flow-root;
}

2，相邻兄弟元素的 margin 合并

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: salmon;
  }
  .box1 {
    margin-bottom: 50px;
  }
  .box2 {
    margin-top: 100px;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>

表现，margin 并没有相加，而是合并取最大值：

解决：给其中一个元素增加父级，这样就回到了第1种情况。

<style>
  .container {
    display: flow-root;
  }
</style>

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

---

这里也说明第一种父子 margin 合并还有哪些解决办法（bottom 合并同理）：

1. 父元素设置 border-top
2. 父元素设置 padding-top
3. 父元素和第一个子元素之间添加内联元素进行间隔。

---

以上。