BFC 块级格式化上下文

BFC 的触发条件及常见应用场景

问题

什么是 BFC？如何触发 BFC？BFC 有哪些实际应用？

解答

什么是 BFC

BFC（Block Formatting Context）是一个独立的渲染区域，内部元素的布局不会影响外部元素。

触发条件

以下任一条件都会创建 BFC：

float 不为 none
position 为 absolute 或 fixed
display 为 inline-block、flex、grid、table-cell 等
overflow 不为 visible（常用 hidden 或 auto）
根元素 <html>

应用一：清除浮动

浮动元素会导致父容器高度塌陷，触发 BFC 可以包含浮动元素。

<style>
  .container {
    border: 2px solid #333;
    /* 触发 BFC，包含浮动子元素 */
    overflow: hidden;
  }
  .float-box {
    float: left;
    width: 100px;
    height: 100px;
    background: #4a90d9;
  }
</style>

<div class="container">
  <div class="float-box"></div>
  <!-- 父容器现在能正确包裹浮动元素 -->
</div>

应用二：防止 margin 重叠

相邻块级元素的垂直 margin 会合并，将元素放入不同的 BFC 可以阻止合并。

<style>
  .box {
    width: 100px;
    height: 100px;
    background: #4a90d9;
    margin: 50px;
  }
  .bfc-wrapper {
    /* 创建新的 BFC */
    overflow: hidden;
  }
</style>

<!-- 没有 BFC：两个 box 的 margin 会重叠，间距为 50px -->
<div class="box"></div>
<div class="box"></div>

<!-- 有 BFC：间距为 100px（50 + 50） -->
<div class="box"></div>
<div class="bfc-wrapper">
  <div class="box"></div>
</div>

应用三：自适应两栏布局

BFC 区域不会与浮动元素重叠，利用这个特性实现两栏布局。

<style>
  .sidebar {
    float: left;
    width: 200px;
    height: 300px;
    background: #4a90d9;
  }
  .main {
    /* 触发 BFC，不与左侧浮动元素重叠 */
    overflow: hidden;
    height: 300px;
    background: #67c23a;
  }
</style>

<div class="sidebar">固定宽度侧边栏</div>
<div class="main">自适应宽度主内容区</div>

关键点

BFC 是独立的布局区域，内部布局不影响外部
常用 overflow: hidden 触发 BFC
BFC 可以包含浮动元素，解决高度塌陷
不同 BFC 之间的 margin 不会重叠
BFC 区域不会与浮动元素重叠，可用于自适应布局