BFC：块级格式化上下文

BFC的原理

BFC是一个独立的布局环境，它里面的元素不会受到外面元素的影响，也不会影响外面的元素。BFC的形成条件有很多，最常见的是：

• 块级元素（如div、p、h1等）
• 浮动元素（如img、object等）
• 绝对定位元素
• 行内块元素（如span、a等）

当一个元素满足以上条件之一时，它就会形成一个BFC。BFC的形成会影响元素的布局和定位。

BFC的用法

BFC可以用来解决浮动元素带来的问题。浮动元素会脱离文档流，导致后面的元素无法紧跟在浮动元素之后。为了解决这个问题，我们可以使用BFC来将浮动元素包含在里面，这样后面的元素就会紧跟在BFC之后。

BFC还可以用来更好地控制元素的布局和定位。我们可以利用BFC来将元素分组，然后对每个组进行不同的布局和定位。这样可以使我们的页面布局更加清晰和美观。

BFC的总结

BFC是CSS布局中一个非常重要的概念。它可以帮助我们解决浮动元素带来的问题，并且可以更好地控制元素的布局和定位。在实际开发中，我们可以灵活运用BFC来实现各种复杂的布局效果。

BFC的示例

我们来看一个简单的示例来演示BFC的用法。假设我们有一个页面，里面有两个浮动元素和一个非浮动元素。如下所示：

<div class="container">
  <div class="float-left">浮动元素1</div>
  <div class="float-right">浮动元素2</div>
  <div class="non-float">非浮动元素</div>
</div>

.container {
  width: 100%;
  height: 100%;
}

.float-left {
  float: left;
  width: 50%;
  height: 50%;
  background-color: red;
}

.float-right {
  float: right;
  width: 50%;
  height: 50%;
  background-color: blue;
}

.non-float {
  width: 100%;
  height: 100%;
  background-color: green;
}

如果没有使用BFC，那么非浮动元素就会紧跟在浮动元素之后，如下所示：

+-----------------------------------+
| 浮动元素1                        |
|                                   |
| 浮动元素2                        |
|                                   |
| 非浮动元素                       |
+-----------------------------------+

但是，如果我们使用BFC，那么非浮动元素就会紧跟在BFC之后，如下所示：

+-----------------------------------+
| 浮动元素1                        |
|                                   |
| 浮动元素2                        |
|                                   |
+-----------------------------------+
| 非浮动元素                       |
+-----------------------------------+

从这个示例中我们可以看出，BFC可以有效地解决浮动元素带来的问题。