谈谈我对BFC的理解

zhuYan66

已于 2022-09-20 14:04:42 修改

阅读量116

点赞数

文章标签： html css

于 2022-09-20 13:51:35 首次发布

本文链接：https://blog.csdn.net/qq_43243200/article/details/126949779

版权

块格式化上下文（Block Formatting Context，BFC）

概念

这里是MDN提供的解释：
BFC是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

这里有一些我抽象，我主要理解为：
BFC是一个独立的渲染区域，不会影响到外面的元素。并且有一套自己的渲染规则，它规定了内部子元素是如何定位的。

如何触发BFC?

摘抄自MDN
在这里插入图片描述

BFC有什么作用呢？

1、解决margin的折叠问题

官方文档中提到：在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
那么我们如何解决此问题呢？将这两个相邻的box属于不同的BFC不就可以了嘛

现象demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .container {
          width: 800px;
          height: 500px;
          background: #4192c9;
      }

      .container .box {
          width: 100px;
          height: 100px;

      }

      .container .box1 {
          margin-bottom: 200px;
          background: aquamarine;
      }
      .container .box2 {
          margin-top: 100px;
          background: #2e6924;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
</div>
</body>
</html>

效果图
在这里插入图片描述
解决方案：将两个box放在不同的BFC中

// style
.container .b {
          overflow: hidden; // 触发了BFC
      }

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

效果：
在这里插入图片描述

2、解决浮动高度塌陷问题

我们都知道浮动元素是不会向父元素汇报高度的，导致父元素的高度为0，见下方示例效果。
在这里插入图片描述
那么，BFC来了，解决了此问题。。

在这里插入图片描述
那么为什么BFC可以解决此问题呢？因为当前container的height为auto。我在官网中找到了如下解释：

翻译如下：

在某些情况下（例如，参见上面的第 10.6.4 和 10.6.6 节），建立块格式化上下文的元素的高度计算如下：
如果它只有 inline-level 子级，则高度是最顶层行框顶部和最底层行框底部之间的距离。
如果它有块级子框，则高度是最顶层块级子框的上边距边缘与最底层块级子框的下边距边缘之间的距离。
绝对定位的子元素被忽略，相对定位的盒子被认为没有偏移。请注意，子框可能是匿名块框。
此外，如果元素有任何浮动后代，其底部边缘边缘低于元素的底部内容边缘，则增加高度以包括这些边缘。仅考虑参与此块格式化上下文的浮点数，例如，绝对定位后代内的浮点数或其他浮点数不被考虑。