BFC学习笔记

概念（来自MDN）

BFC即block formatting context(块级格式化上下文)，是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

个人理解：在某些条件（形成BFC的条件）下，一个元素及其子元素拥有特定的渲染规则，此时我们称该元素形成一个BFC。

形成条件(满足以下任何一种即可)

• 根元素(html)

• 浮动元素（元素的 float 不是 none）

• 绝对定位元素（元素的 position 为 absolute 或 fixed）

• overflow 值不为 visible 的块元素

• display 为 inline-block flex grid table-cell 等（具体参见块格式化上下文）

BFC的渲染规则（和块级元素的区别）

1. 属于同一个 BFC 内部的 box 的垂直 margin 会发生重叠

2. BFC 是个独立的容器，容器里面的子元素不会影响外面的元素，反之亦然

3. 计算BFC的高度时，浮动元素也参与计算

理解 BFC 后可以解决的问题

1. 阻止外边距重叠

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
   100vw;
  background: skyblue;
}

.child {
  margin: 10px;
   100px;
  height: 100px;
  background: deeppink;
}

此时两个 child 元素属于同一个 BFC（根元素html）内，根据 BFC 规则1，外边距会发生重叠。我们可以使他们在不同的 BFC 中，就不会重叠了

CSS

.child:last-child {
  display: inline-block;
}

2. 阻止元素和 float box 重叠

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
   100vw;
  background: skyblue;
}

.child {
  margin: 10px;
   100px;
  height: 100px;
  background: deeppink;
}

.child:first-child {
  float: left;
}

根据 BFC 规则2，此时两个 child 会发生重叠，为了阻止重叠，我们可以为另一个非浮动元素创建 BFC

CSS

.child:last-child {
  overflow: hidden;
}

3. 清除浮动，防止容器高度塌陷

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
   100vw;
  background: skyblue;
}

.child {
  float: left;
   100px;
  height: 100px;
  background: deeppink;
}

此时容器 box 的高度为 0，因为浮动的元素不参与高度计算，造成了该容器高度塌陷。根据 BFC 规则3，可以利用 BFC 元素下的浮动元素参与高度计算来清除浮动。

CSS

box {
   100vw;
  overflow: hidden;
  background: skyblue;
}

4. 可以利用 BFC 完成自适应两栏布局

HTML

<div class="box">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

box {
   100vw;
  background: skyblue;
}

.child {
  height: 100px;
  background: deeppink;
}

.child:first-child {
  float: left;
   100px;
}

.child:;ast-child {
  overflow: hidden;
}

实际也是利用了 BFC 规则2，BFC 元素不会和 float box 重叠

总结

其实我们在平常的工作中经常和 BFC 打交道，如外边距折叠，设置 overflow:hidden 清除浮动，自适应两列布局。但是很多人包括我自己对于 BFC 只是听说过概念，并不清楚其形成条件和渲染规则。今天通过写博客的方式让自己对其有了更清晰的认识，希望大家看完这篇文章后对 BFC 也可以有个清晰的了解和认识。其中若有错误的地方也希望可以帮忙指出。

参考

• 布局概念 关于CSS-BFC深入理解

• 前端精选文摘：BFC 神奇背后的原理

• 深入理解BFC

---

欢迎到前端学习打卡群一起学习～516913974