BFC 小宇宙大能量，布局的秘密武器

在前端开发中，我们经常会遇到各种布局问题，比如浮动元素导致的错位、元素无法垂直居中、绝对定位元素无法正确显示等等。这些问题往往让人抓狂，但其实只要掌握 BFC，就能轻松解决。

什么是 BFC？

BFC（Block Formatting Context）中文翻译为块级格式化上下文，它是一个独立的渲染区域，里面的元素不受外部元素的影响。BFC 的范围由包含它的第一个块级元素决定，块级元素包括 div、p、h1、ul 等。

BFC 的作用

BFC 的作用主要有以下几点：

• 清除浮动。 BFC 可以清除内部的浮动元素，使它们不会影响其他元素的布局。
• 实现多列布局。 BFC 可以实现多列布局，只需要将元素设置为浮动元素，然后将父元素设置为 BFC 即可。
• 制作绝对定位元素的容器。 BFC 可以制作绝对定位元素的容器，只需要将父元素设置为 BFC，然后将子元素设置为绝对定位即可。

如何创建 BFC？

要创建 BFC，只需要满足以下条件之一即可：

• 元素是块级元素。
• 元素是浮动元素。
• 元素是绝对定位元素。
• 元素是表格元素。

BFC 的注意事项

在使用 BFC 时，需要注意以下几点：

• BFC 的范围由包含它的第一个块级元素决定。 这意味着，如果一个元素嵌套在多个块级元素中，则该元素只属于最里面的那个块级元素的 BFC。
• BFC 中的元素不受外部元素的影响。 这意味着，如果一个元素在 BFC 中，则它不会被外部元素的浮动或绝对定位所影响。
• BFC 中的元素可以影响外部元素。 这意味着，如果一个元素在 BFC 中，则它可以影响外部元素的布局，比如绝对定位元素会影响其父元素的高度。

举例

下面我们来看几个 BFC 的使用示例。

1. 清除浮动。

<div class="clearfix"></div>

.clearfix {
  clear: both;
}

这段代码可以清除浮动，因为它创建了一个 BFC。

2. 实现多列布局。

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

.columns {
  display: flex;
  flex-direction: row;
}

.column {
  flex: 1;
  margin: 10px;
  background-color: #ccc;
}

这段代码实现了多列布局，因为它创建了三个 BFC。

3. 制作绝对定位元素的容器。

<div class="container">
  <div class="absolute"></div>
</div>

.container {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

这段代码制作了一个绝对定位元素的容器，因为它创建了一个 BFC。

总结

BFC 是一个非常重要的概念，它可以帮助我们解决各种布局问题。掌握 BFC，布局不再是难题！