什么是BFC吗？BFC有哪些使用场景？ - 前端面试题

什么是BFC

BFC (Block Formatting Context) 是 Web 页面的可视化 CSS 渲染的一部分，它是块级盒布局发生的区域，也是浮动元素与其他元素的交互限定区域。

如何创建 BFC

在 CSS 中，以下几种方式可以创建 BFC：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素（元素的 position 为 absolute 或 fixed）
内联块（元素的 display 为 inline-block）
表格单元格 (元素的 display 为 table-cell，HTML 表格单元格默认为 table-cell)
表格标题（元素的 display 为 table-caption，HTML 表格标题默认为 table-caption）
匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-footer-group 或 table-cell且是匿名的）
overflow 值不为 visible 的块级元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
contain 值为 layout、paint 或 size 的元素
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素总是会创建一个新的 BFC，这样使得元素能跨越多列。

BFC 有哪些规则

BFC遵循一些特殊的规则，主要包括：

**内部的 Box 会在垂直方向一个接一个地放置。**也就是说，在 BFC 中，块级盒子都是紧贴在一起的。垂直方向的距离由 margin 决定，两个相邻 Box 的 margin 会发生重叠。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每个元素的左边，与包含块（Containing Block）的左边相接触。这句话的意思是：在 BFC 中，每一个 Box 的左边都贴紧包含块的左边。
BFC的区域不会与 float box 重叠。BFC 是浮动元素和其它元素交互的界限，BFC 与浮动盒子不会重叠。
计算 BFC 的高度时，浮动元素也参与计算。也就是说，如果 BFC 内部有浮动的元素，那么 BFC 的高度会扩大，以包含这个浮动元素，也就是说 BFC 是可以包含浮动元素的。

BFC 的应用场景

通过掌握 BFC，我们可以解决一些常见的 CSS 布局问题，如以下几种场景：

避免外边距折叠

在 BFC 中，处于同一 BFC 中的两个块元素的垂直外边距会发生折叠。如果你不想让这两个外边距折叠，你可以将元素放在不同的 BFC 中。

清除浮动

由于 BFC 可以包含浮动，我们可以用 BFC 来清除内部浮动，避免造成父元素高度塌陷。

当父元素内部的子元素全部浮动后，它们脱离了正常的文档流，父元素就会失去高度，这个现象通常被称为高度塌陷。如果把父元素变为一个 BFC，那么它可以“感知”到浮动元素，从而包裹住浮动元素。这是因为 BFC 在生成时，会计算内部的浮动元素。

为了将父元素变为一个 BFC，我们通常会使用 overflow 属性，如：overflow:auto 或者 overflow:hidden。

css
.container {
  overflow: auto;
}

制作自适应两栏布局

BFC 也可以用于构建布局。比如，常见的两栏布局，左栏固定宽度，右栏自适应：

HTML 结构如下：

html
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS 样式如下：

css
.container {
  width: 100%;
}
.left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: red;
}
.right {
  overflow: hidden;
  height: 200px;
  background-color: green;
}

在这个例子中，left 元素设置了浮动，然后 right 元素设置 overflow:hidden，这样 right 就基于 BFC，从而填充剩下的空间。

综上，BFC 在处理一些布局问题和元素间的关系时非常有用，它是 CSS 中的一个重要概念，理解和掌握它可以帮助我们更好地应对布局难题。