BFC介绍

一、什么是 BFC

BFC（Block Formatting Context），即块级格式化上下文，是 CSS 中一个重要的布局概念。

1.1 定义

BFC 是一个独立的渲染区域，在这个区域内，元素的布局不受外界影响，同时也不会影响外界元素。

1.2 生活类比

想象一下，在一个大房间里，有多个独立的泡泡。每个泡泡内部的物品可以自由摆放，但不会影响其他泡泡里的物品。BFC 就像是这样的泡泡。

1.3 BFC 的核心特点

内部隔离：BFC 内部的元素布局与外部完全隔离
垂直排列：BFC 内的块级元素会垂直排列
外边距合并：BFC 内相邻块级元素的垂直外边距会合并
不重叠浮动：BFC 不会与浮动元素重叠
包含浮动：BFC 可以包含浮动元素，防止父元素高度塌陷

二、触发 BFC 的条件

只要满足以下任一条件，就会触发 BFC：

触发方式	代码示例
根元素	`<html>`
浮动元素	`float: left/right`
绝对定位	`position: absolute/fixed`
行内块元素	`display: inline-block`
表格单元格	`display: table-cell`
表格标题	`display: table-caption`
overflow 非 visible	`overflow: hidden/auto/scroll`
flex 容器	`display: flex/inline-flex`
grid 容器	`display: grid/inline-grid`

三、BFC 的三大特性

3.1 特性1：内部元素垂直外边距不会重叠

在普通文档流中，相邻块级元素的垂直外边距会发生重叠。但在 BFC 中，这个问题可以得到解决。

html 复制代码

<style>
.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #f00;
}

.container {
  overflow: hidden; /* 触发 BFC */
}
</style>

<!-- 普通情况：外边距重叠，间距只有 20px -->
<div class="box"></div>
<div class="box"></div>

<!-- BFC 情况：外边距不重叠，间距是 40px -->
<div class="container">
  <div class="box"></div>
</div>
<div class="container">
  <div class="box"></div>
</div>

3.2 特性2：不会与浮动元素重叠

BFC 会自动适应浮动元素的位置，不会与浮动元素重叠。

html 复制代码

<style>
.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

.normal-box {
  height: 150px;
  background: #0f0;
}

.bfc-box {
  height: 150px;
  background: #00f;
  overflow: hidden; /* 触发 BFC */
}
</style>

<!-- 普通情况：会与浮动元素重叠 -->
<div class="float-box"></div>
<div class="normal-box">普通盒子</div>

<!-- BFC 情况：不会与浮动元素重叠 -->
<div class="float-box"></div>
<div class="bfc-box">BFC 盒子</div>

3.3 特性3：可以包含浮动元素

BFC 可以包裹浮动元素，解决父元素高度塌陷问题。

html 复制代码

<style>
.parent {
  border: 2px solid #000;
}

.child {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

.bfc-parent {
  border: 2px solid #000;
  overflow: hidden; /* 触发 BFC */
}
</style>

<!-- 普通情况：父元素高度塌陷 -->
<div class="parent">
  <div class="child"></div>
</div>

<!-- BFC 情况：父元素包含浮动元素 -->
<div class="bfc-parent">
  <div class="child"></div>
</div>

四、BFC 的实际应用

4.1 应用1：解决 margin 重叠问题

css 复制代码

/* 给每个元素包裹一层 BFC 容器 */
.bfc {
  overflow: hidden;
}

.box {
  margin: 20px;
}

4.2 应用2：实现两栏自适应布局

html 复制代码

<style>
.left {
  float: left;
  width: 200px;
  height: 300px;
  background: #f00;
}

.right {
  overflow: hidden; /* 触发 BFC */
  height: 300px;
  background: #0f0;
}
</style>

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

4.3 应用3：清除浮动（替代 clearfix）

css 复制代码

.clearfix {
  overflow: hidden; /* 触发 BFC */
}

4.4 应用4：防止文字环绕

html 复制代码

<style>
.float-img {
  float: left;
  width: 100px;
  height: 100px;
}

.text {
  overflow: hidden; /* 触发 BFC */
}
</style>

<img src="example.jpg" class="float-img">
<p class="text">这是一段文字，不会环绕图片...</p>

一、什么是 BFC

1.1 定义

1.2 生活类比

1.3 BFC 的核心特点

二、触发 BFC 的条件

三、BFC 的三大特性

3.1 特性1：内部元素垂直外边距不会重叠

3.2 特性2：不会与浮动元素重叠

3.3 特性3：可以包含浮动元素

四、BFC 的实际应用

4.1 应用1：解决 margin 重叠问题

4.2 应用2：实现两栏自适应布局

4.3 应用3：清除浮动（替代 clearfix）

4.4 应用4：防止文字环绕

五、总结

5.1 BFC 的核心作用

5.2 关键要点