深度解析CSS中的BFC(Block Formatting Context)

在探索CSS中的布局奥秘时，我们不得不提到BFC(Block Formatting Context)这个强大的概念。BFC是Web页面中盒模型布局的一个隔离的独立容器，理解BFC对于处理页面布局中的许多常见问题至关重要。本文深入挖掘BFC，这一篇文章足以让你对BFC有一个全新的认识，并将其应用到实际的前端开发中去。

什么是BFC

BFC，即块格式化上下文，是Web页面CSS渲染的一部分，它决定了元素如何对其内容进行布局，并与周围元素如何相互作用。简而言之，一个拥有BFC的元素，其内部的布局与外部互不影响。

如何触发BFC

BFC可以通过多种方式触发，其中包括：

根元素（<html>）
浮动元素（float除none以外的值）
绝对定位元素（position为absolute或fixed）
display为inline-block、table-cells、flex的元素
overflow除visible以外的值（hidden、scroll、auto）

BFC的特性

BFC具有一些独特的特性：

内部的Box会在垂直方向上一个接一个排列。
属于同一个BFC的两个相邻Box的上下margin会发生重叠。
Box的垂直方向的边距由其最大者决定。
计算BFC的高度时，浮动元素也参与计算。
BFC的区域不会与float box重叠。
每个元素的左边界触碰到包含块的左边界，即使存在浮动也是如此（除非这个Box本身也是float的）。

BFC的应用

以下是一些运用BFC来解决常见Web开发问题的场景：

1. 防止`margin`重叠

由于BFC中块级盒子的margin在垂直方向上会发生重叠，我们可以创建一个新的BFC来防止相邻元素之间的margin重叠，如两个相邻元素都设置BFC，则它们之间的margin就不会重叠了。

<div class="container">
  <div class="block"></div>
  <div class="block new-bfc"></div>
</div>

<style>
.container {
  width: 200px;
}
.block {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background: lightblue;
}
/* 创建新的BFC */
.new-bfc {
  overflow: hidden;
}
</style>

2. 包含浮动元素

当内部子元素浮动时，没有高度的父元素就像被“忽略”了。创建一个BFC可以让父元素“认识”到浮动子元素，从而包含它们的高度，清除浮动。

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

<style>
.container {
  overflow: hidden; /* 触发BFC */
}
.float-child {
  float: left;
  width: 100px;
  height: 100px;
  background: lightcoral;
}
</style>

3. 避免与浮动元素重叠

在布局时，如果不想让一个块级盒子被浮动元素所覆盖，可以创建一个BFC避免重叠，因为在BFC中，Box的垂直方向的边距不会被浮动元素覆盖。

<div class="float-box"></div>
<div class="bfc-box"></div>

<style>
.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: lightseagreen;
}
.bfc-box {
  overflow: hidden; /* 触发BFC */
  width: 200px;
  height: 200px;
  background: lightgoldenrodyellow;
}
</style>

理解并掌握BFC是成为一名高级前端开发者的必备知识。通过本文的细致讲解，你已经迈入了深入了解如何借助BFC解决布局问题的大门。继续学习、实验并应用这些知识，你会发现自己能够更加游刃有余地处理各种繁杂的布局挑战。这份深入浅出的技术文章，如果对你有所启发，不妨继续关注，成为技术交流的伙伴吧。我们一起在前端的世界里探险，发现更多精彩！

原文链接：https://juejin.cn/post/7320127815356907530 作者：慕仲卿