有了 BFC，不再担心外边距重叠
2023-09-13 19:11:35
在 CSS 中，BFC 占据着重要的位置，本文梳理了 CSS BFC 的相关内容，请仔细阅读。
外边距重叠：不速之客
首先，让我们认识一个问题——外边距重叠。
外边距重叠会有三种情况：
-
上下两个元素都是块级元素，且其中一个元素设置了外边距，那么当另一个元素的外边距和其重叠时，两个元素的外边距都会被应用，导致这两个元素的外边距叠加。
-
当元素 A 的外边距与浮动元素或绝对定位元素的外边距重叠时，元素 A 的外边距也会被应用，这会导致元素 A 和浮动元素或绝对定位元素之间的距离比预期的要大。
-
当元素 A 的外边距与行内元素的外边距重叠时，元素 A 的外边距也会被应用，但行内元素的外边距不会被应用。这会导致元素 A 和行内元素之间的距离比预期的要小。
显然，外边距重叠问题给布局带来了麻烦。为了解决这个问题，我们引入了 BFC。
BFC 登场：力挽狂澜
BFC 全称是 Block Formatting Context，即块级格式化上下文。它是 CSS 中的一个概念，用于定义一个独立的区域，在这个区域内，元素的布局和排列不受外部元素的影响。
触发 BFC 的规则有很多，其中最常见的有：
-
根元素 (
<html>) -
浮动元素
-
绝对定位元素
-
行内块元素 (
<span>、<a>等) -
overflow属性不为visible的元素 -
box-sizing属性不为content-box的元素 -
display属性为table、table-cell、inline-table或table-caption的元素 -
position属性为fixed的元素
如果一个元素满足上述规则之一，那么它就会创建一个新的 BFC。
当一个元素创建了一个 BFC 后，它就拥有了以下特性：
-
BFC 中的块级元素在垂直方向上紧密排列，不会出现外边距重叠的情况。
-
BFC 中的浮动元素和绝对定位元素不会影响 BFC 中其他元素的位置。
-
BFC 中的行内元素的宽度和高度由其内容决定，不会被 BFC 中的其他元素影响。
-
BFC 中的元素不会与 BFC 外部的元素产生外边距重叠。
应用场景：大展身手
BFC 在 CSS 布局中有着广泛的应用场景，以下是一些常见的应用场景：
-
清除浮动元素：BFC 可以清除浮动元素的影响，使得浮动元素不会影响其他元素的位置。
-
垂直居中元素：BFC 可以让元素在垂直方向上居中对齐。
-
创建多列布局：BFC 可以创建多列布局，使得元素在水平方向上并排排列。
-
创建响应式布局：BFC 可以创建响应式布局，使得元素在不同屏幕尺寸下都能正确显示。
常见问题与解决方案：拨开云雾
在使用 BFC 时，难免会遇到一些问题。以下是一些常见的 BFC 问题及解决方案：
- 问题：BFC 中的元素无法垂直居中。
解决方案：可以使用 margin-top 或 margin-bottom 属性来垂直居中元素。
- 问题：BFC 中的元素无法水平居中。
解决方案：可以使用 text-align 属性来水平居中元素。
- 问题：BFC 中的元素无法换行。
解决方案：可以使用 white-space 属性来控制元素的换行行为。
- 问题：BFC 中的元素与 BFC 外部的元素产生了外边距重叠。
解决方案：可以使用 margin-top 或 margin-bottom 属性来调整元素的外边距。
总结：融会贯通
BFC 是 CSS 中一个重要的概念，它在 CSS 布局中扮演着举足轻重的角色。通过理解 BFC 的概念、规则和应用场景，我们可以更加熟练地使用 CSS 来创建复杂而美观的布局。
希望本文能够帮助读者对 BFC 有更加深入的理解，并在实际项目中熟练运用 BFC 来解决各种布局问题。
