BFC：CSS 里的神奇格式化盒子，你了解多少？

BFC（Block Formatting Contexts），块级格式化上下文，是 CSS 中一个鲜为人知的但用途广泛的概念。它可以帮助您创建复杂的布局，并且还可以防止元素之间出现意外的间距。

什么是 BFC？

BFC 是一个独立的渲染区域，其中的元素按照从上到下的顺序进行布局。BFC 与其他 BFC 之间不会相互影响，也不会受到浮动元素的影响。

BFC 的作用

BFC 有许多作用，其中最主要的作用是：

• 阻止浮动元素进入 BFC 内部。
• 阻止元素在 BFC 内重叠。
• 创建多列布局。
• 创建网格布局。
• 垂直居中元素。

如何创建 BFC

要创建一个 BFC，您需要给元素设置以下属性之一：

• display: block
• display: inline-block
• display: flex
• display: grid

BFC 的使用示例

以下是一些 BFC 的使用示例：

• 阻止浮动元素进入 BFC 内部

.container {
  display: block;
  width: 500px;
  height: 500px;
  background-color: red;
}

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: blue;
}

在这个例子中，.container 是一个 BFC，.float 是一个浮动元素。由于 .container 是一个 BFC，.float 不能进入 .container 内部，而是会出现在 .container 的旁边。

• 阻止元素在 BFC 内重叠

.container {
  display: block;
  width: 500px;
  height: 500px;
  background-color: red;
}

.overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
}

在这个例子中，.container 是一个 BFC，.overlap 是一个绝对定位的元素。由于 .container 是一个 BFC，.overlap 不能重叠到 .container 的内容上，而是会出现在 .container 的前面。

• 创建多列布局

.container {
  display: flex;
  flex-direction: row;
  width: 500px;
  height: 500px;
  background-color: red;
}

.column {
  flex: 1;
  background-color: blue;
}

在这个例子中，.container 是一个 BFC，.column 是两个具有相同宽度的列。由于 .container 是一个 BFC，.column 不会在 BFC 内重叠，而是会并排排列。

• 创建网格布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 500px;
  height: 500px;
  background-color: red;
}

.grid-item {
  background-color: blue;
}

在这个例子中，.container 是一个 BFC，.grid-item 是三个具有相同宽度的网格单元格。由于 .container 是一个 BFC，.grid-item 不会在 BFC 内重叠，而是会按照网格布局进行排列。

总结

BFC 是 CSS 中一个鲜为人知但用途广泛的概念。它可以帮助您创建复杂的布局，并且还可以防止元素之间出现意外的间距。掌握 BFC 的使用可以帮助您创建更美观、更易用的网页布局。