BFC: 布局自由地生活，不受外界约束

我们生活在一个自由的世界里，我们能够不受限制地表达自己，做自己想做的事。在网页布局中，我们也有一个这样的概念，称为块级格式化上下文（BFC），它允许我们对元素的布局进行精细控制，不受外部元素的影响。

什么是BFC？

BFC 是一个特殊的布局环境，它是一个完全独立的空间，其中的元素不会影响外部布局，反之亦然。这意味着 BFC 中的元素可以自由地定位和排列，而不会受到外部元素的影响。

如何创建 BFC

创建 BFC 非常简单，只需为元素设置以下 CSS 属性之一：

• float: left 或 float: right
• position: absolute 或 position: fixed
• display: inline-block
• display: table-cell
• overflow: auto 或 overflow: scroll

BFC 的应用

BFC 在网页布局中有着广泛的应用，以下是一些常见的场景：

• 清除浮动元素： 通过创建一个 BFC，可以清除浮动元素造成的间隙，使页面布局更加整洁。
• 隔离布局： BFC 可以隔离不同的布局区域，防止元素相互影响，从而创建更灵活和可预测的布局。
• 创建多列布局： BFC 可以用来创建多列布局，而无需使用额外的 HTML 标记。
• 定位元素： 在 BFC 中，元素可以绝对定位，而不会影响外部元素的布局。

举个栗子

让我们举一个使用 BFC 清除浮动元素的例子：

<div class="container">
  <div class="image float-left"></div>
  <div class="text"></div>
</div>

默认情况下，浮动元素会破坏后续元素的正常流。为了防止这种情况，我们可以为 .container 添加 overflow: hidden，创建一个 BFC，将浮动元素包含在内：

<div class="container">
  <div class="image float-left"></div>
  <div class="text"></div>
  <style>
    .container {
      overflow: hidden;
    }
  </style>
</div>

这样，浮动元素就会被包含在 BFC 中，不会影响后续元素的布局。

总结

BFC 是网页布局中一个非常有用的概念，它允许我们对元素的布局进行精细控制。通过创建 BFC，我们可以清除浮动元素、隔离布局、创建多列布局和定位元素，从而创建更灵活和可预测的布局。