聊聊面试官爱问的BFC

来点vc
1,434 阅读5分钟

BFC 是什么

BFC（Block Formatting Context）是 CSS 中的一种布局上下文，它是一个独立的渲染区域，具有一些特定的布局规则。

BFC 解决了什么问题

BFC 的出现主要解决了以下几个常见的布局问题：

  1. 清除浮动问题，避免父元素塌陷。
  2. 防止外边距重叠问题。
  3. 控制浮动元素在容器内的布局。
  4. 创建独立的渲染环境，避免与浮动元素重叠。

BFC 的布局规则

BFC 的布局规则包括：

  1. 内部的块级元素垂直排列：  BFC 内部的块级元素会垂直排列，一个元素紧接着另一个元素。
  2. 相邻的块级元素外边距不会重叠：  BFC 内部相邻的块级元素的垂直外边距不会发生重叠，它们之间会保留一个最大的外边距值。
  3. 浮动元素会被包含在 BFC 内部：  BFC 会包含其内部的浮动元素，不会让浮动元素溢出。
  4. BFC 的区域不会与浮动元素重叠：  BFC 会创建一个独立的渲染环境，不会与浮动元素发生重叠。
  5. BFC 的高度计算方式会考虑浮动元素：  BFC 的高度计算会包括其内部的浮动元素，不会发生高度塌陷。

BFC 出现的场景

1. 清除浮动问题

当浮动元素未被正确清除时，容器的高度可能塌陷。通过创建 BFC，可以解决这个问题。

<style>
  .container {
    overflow: hidden; /* 创建BFC */
    background-color: lightgray;
  }

  .float-left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="float-left"></div>
</div>

image.png

在这个示例中，container 容器通过设置 overflow: hidden; 创建了一个 BFC。这样，container 可以正确计算并包裹内部的浮动元素 float-left，避免容器高度塌陷，容器高度为200px，当我们把overflow: hidden勾掉时，发生容器高度塌陷，container容器高度为0。

2. 防止外边距重叠问题

在普通文档流中，相邻块级元素的垂直外边距可能会发生重叠。通过创建 BFC，可以避免外边距重叠的问题。

<style>
.container {
  overflow: hidden;
  background-color: lightgray;
}

.box {
  margin: 20px 0;
  background-color: lightblue;
}

.box-container { /* 创建BFC */
  overflow: hidden;
}
</style>

<div class="container">
  <div class="box">内容1</div>
  <div class="box-container">
    <div class="box">内容2</div>
  </div>
</div>

ezgif-5-f05c8043e1.gif

在这个示例中，内容1容器的下外边距与内容2容器的上外边距重叠在一起，通过给内容2容器添加一个容器并设置为overflow:hidden 使其创建BFC。

思考BFC之外的其它方案

使用 padding 或 border 来代替上下边距，因为它们不会与相邻元素的边距发生重叠。

<style>
.container {
  overflow: hidden;
  background-color: lightgray;
}

.box {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: lightblue;
}
</style>

<div class="container">
   <div class="box">内容1</div>
   <div class="box">内容2</div>
</div>

3. 控制浮动元素在容器内的布局

通过创建 BFC，可以控制浮动元素在容器内的布局方式，使其按照预期排列。

<style>
  .container {
    overflow: hidden; /* 创建BFC */
    background-color: lightgray;
  }

  .float-left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="float-left">内容1</div>
  <div class="float-left">内容2</div>
  <div>内容3</div>
</div>

ezgif-5-902b309a04.gif

在这个示例中，.container 元素通过设置 overflow: hidden; 创建了一个 BFC。这样，.float-left 元素会按照浮动属性排列在 .container 容器内。

BFC 的触发机制

1. 使用 overflow: hidden;

通过为容器元素设置 overflow: hidden; 属性，可以创建 BFC，从而解决一些布局问题，如清除浮动、防止溢出等。

<div class="container">
  <div class="float-left">浮动元素</div>
</div>

.container {
  overflow: hidden; /* 创建BFC */
}

.float-left {
  float: left;
  width: 200px;
}

在这个示例中，通过在 .container 上设置 overflow: hidden;，创建了一个新的 BFC。这样，.container 将包含浮动元素，并正确计算容器的高度，避免高度塌陷的问题。

2. 使用 float

通过将元素设置为浮动，可以创建 BFC，并改变其在布局中的行为，如实现多列布局、文字环绕等。

<div class="container">
  <div class="float-left">左侧元素</div>
  <div class="float-right">右侧元素</div>
</div>

.float-left {
  float: left; /* 创建BFC */
  width: 50%;
}

.float-right {
  float: right; /* 创建BFC */
  width: 50%;
}

在这个示例中，使用 float: left; 和 float: right; 分别为两个子元素创建了 BFC。这样，它们将在同一行中并排显示，并且其他内容将环绕在它们周围。

3. 使用 position: absolute;

通过将元素设置为绝对定位，可以创建 BFC，并改变其在布局中的行为，如实现叠加效果、避免溢出等。

<div class="container">
  <div class="absolute-child">绝对定位元素</div>
  <div class="content">内容区域</div>
</div>

.container {
  position: relative; /* 确保创建定位上下文 */
}

.absolute-child {
  position: absolute; /* 创建BFC */
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.content {
  background-color: lightgray;
}

在这个示例中，通过将 .absolute-child 元素设置为绝对定位，创建了一个新的 BFC。这样，.absolute-child 元素将相对于 .container 定位，并不会影响其他内容的布局。

4. 使用 display: flex;

通过将容器元素设置为 display: flex;，可以创建 BFC，并使用 Flexbox 布局来控制其内部元素的排列和对齐方式。

<div class="container">
  <div class="flex-child">Flex元素1</div>
  <div class="flex-child">Flex元素2</div>
</div>

.container {
  display: flex; /* 创建BFC */
  justify-content: space-between;
}

.flex-child {
  flex: 1;
  background-color: lightgray;
}

在这个示例中，通过为 .container 设置 display: flex;，创建了一个新的 BFC。这样，.flex-child 元素将按照 Flexbox 布局的规则进行排列，并在 .container 内部均匀分布。

5. 使用 display: inline-block;

通过将元素设置为 display: inline-block;，可以创建 BFC，并实现类似块级元素的布局特性，同时保留了行内元素的特点。

<div class="container">
  <div class="inline-block-element">元素1</div>
  <div class="inline-block-element">元素2</div>
</div>

.container {
  display: inline-block; /* 创建BFC */
  background-color: lightgray;
}

.inline-block-element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

在这个示例中，通过将 .container 设置为 display: inline-block;，创建了一个新的 BFC。这将使 .container 具有块级元素的布局特性，并且可以容纳子元素 .inline-block-element。

6. 使用 display: flow-root;

在 CSS3 中引入了 display: flow-root; 属性，它可以直接创建 BFC，而无需使用其他属性的副作用。

<div class="container">
  <div class="child">子元素</div>
</div>

.container {
  display: flow-root; /* 创建BFC */
  background-color: lightgray;
}

.child {
  float: left;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

在这个示例中，通过将 .container 设置为 display: flow-root;，直接创建了一个新的 BFC。这样，.container 将包含子元素 .child，并正确计算容器的高度，无需使用其他属性来清除浮动。

总之，BFC的出现能够提供更可靠的布局控制，解决浮动、外边距重叠、定位、溢出等常见的布局问题。希望能从读者那得到更多的反馈，我会更新的文章中，填补知识盲区，一起成长，共勉~

avatar
文章
阅读
粉丝