小林笔记

Appearance

BFC 格式化上下文 ​

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

创建 ​

<html> 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC

  • 使用 float 使其浮动的元素
  • 绝对定位的元素 (包含 position: fixed 或 position: sticky
  • 使用以下属性的元素 display: inline-block
  • 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
  • 表格标题或使用 display: table-caption 的元素
  • 块级元素的 overflow 属性不为 visible
  • 元素属性为 display: flow-root 或 display: flow-root list-item
  • 元素属性为 contain: layout, content, 或 strict
  • flex items
  • 网格布局元素
  • multicol containers
  • 元素属性 column-span 设置为 all

应用 ​

解决浮动元素引起的高度塌陷 ​

忙碌是一种幸福，让我们没时间体会痛苦；奔波是一种快乐，让我们真实地感受生活；疲惫是一种享受，让我们无暇空虚。

譬如为山，未成一篑，止，吾止也，譬如平地，虽覆一篑，进，吾往也。

vue
<template>
  <div style="overflow: hidden">
    <div class="box">
      <div class="float">
        忙碌是一种幸福，让我们没时间体会痛苦；奔波是一种快乐，让我们真实地感受生活；疲惫是一种享受，让我们无暇空虚。
      </div>
      <p>譬如为山，未成一篑，止，吾止也，譬如平地，虽覆一篑，进，吾往也。</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}

.float {
  float: left;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}
</style>

容器元素设置 overflow: hidden 开启 BFC。

忙碌是一种幸福，让我们没时间体会痛苦；奔波是一种快乐，让我们真实地感受生活；疲惫是一种享受，让我们无暇空虚。

譬如为山，未成一篑，止，吾止也，譬如平地，虽覆一篑，进，吾往也。

vue
<template>
  <div class="box" style="overflow: hidden">
    <div class="float">
      忙碌是一种幸福，让我们没时间体会痛苦；奔波是一种快乐，让我们真实地感受生活；疲惫是一种享受，让我们无暇空虚。
    </div>
    <p>譬如为山，未成一篑，止，吾止也，譬如平地，虽覆一篑，进，吾往也。</p>
  </div>
</template>

<style lang="scss" scoped>
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}

.float {
  float: left;
  width: 200px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}
</style>

防止外边距合并 ​

兄弟外边距合并

开启BFC，兄弟外边距未合并

父子外边距合并

哦

开启BFC，父子外边距未合并

哦

vue
<template>
  <div class="margin">
    <div class="left">
      <p>兄弟外边距合并</p>
      <div></div>
    </div>
    <div class="right margin-bfc">
      <p>开启BFC，兄弟外边距未合并</p>
      <div></div>
    </div>
  </div>
  <div class="margin">
    <div class="left">
      <p>父子外边距合并</p>
      <div>
        <p>哦</p>
      </div>
    </div>
    <div class="right">
      <p>开启BFC，父子外边距未合并</p>
      <div style="overflow: hidden">
        <p>哦</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.margin {
  display: flex;
  & > div {
    flex: 1;
    & div {
      height: 100px;
      width: 100px;
      background-color: lightblue;
      margin: 50px;
      p {
        margin: 20px;
      }
    }
  }
}
.margin-bfc {
  display: flex;
  flex-direction: column;
}
</style>