解析 BFC：理解块级格式化上下文

一、何为 BFC

在 CSS 布局中，块级格式化上下文 (BFC) 是一种特殊的环境，其中包含的块级元素（如 div、p、h1 等）按照特定规则排列和格式化。BFC 与其他元素隔离，其内部元素不受外部元素的影响，也不会影响外部元素。

二、BFC 的作用

BFC 主要用于解决布局中的常见问题，例如：

• 清除浮动： BFC 可以清除其内部的浮动元素，使其不会影响外部元素。
• 垂直对齐： BFC 可以让其内部的块级元素垂直对齐，即使它们的父级元素高度不足。
• 断行： BFC 可以防止其内部的元素断行到下一页，确保它们保持在同一行上。

三、创建 BFC

以下情况会创建 BFC：

• 根元素
• float 非 none 的元素
• overflow 非 visible 的元素
• display 为 inline-block、table-cell 或 table-caption 的元素
• position 为 absolute 或 fixed 的元素

四、实例与用例

实例：清除浮动

<div class="container">
  <div class="left-column">
    <img src="image.png" float="left">
    <p>文本...</p>
  </div>
  <div class="right-column">
    <p>文本...</p>
  </div>
</div>

在没有 BFC 的情况下，左栏中的浮动图像会影响右栏的内容。为了解决这个问题，我们可以为容器元素添加 BFC：

<div class="container" style="overflow: hidden;">
  ...
</div>

用例：垂直对齐

<div class="container">
  <div class="box1" style="height: 50px;">
    <p>文本 1</p>
  </div>
  <div class="box2" style="height: 100px;">
    <p>文本 2</p>
  </div>
</div>

在没有 BFC 的情况下，两个盒子不会垂直对齐。我们可以为容器元素添加 BFC：

<div class="container" style="display: inline-block;">
  ...
</div>

五、总结

BFC 是 CSS 布局中一个重要的概念，它提供了解决常见布局问题的手段。通过理解 BFC 的工作原理，您可以优化您的网页设计，创建更干净、更一致的布局。