CSS-Float-Clear-and-BFC

字数统计: 3.9k阅读时长: 15 min

 2026/07/28 

第20课：浮动与清除浮动——`float`、`clear` 与 BFC

在 Flexbox 和 Grid 成为主流布局方案之前，float 是网页布局的核心手段——从多栏排版到图文环绕，再到导航菜单，都依赖浮动来实现。然而，浮动元素“脱离文档流却不完全脱离”的特殊行为，也带来了父容器高度塌陷这一经典问题。理解浮动的工作原理以及各种清除浮动技术，是阅读和维护遗留代码的必备技能。此外，清除浮动引出的块级格式化上下文（BFC） 概念，是 CSS 布局理论的重要基石，其应用远超浮动本身。

1. `float` 属性：图文环绕与多栏布局

float 属性最初的设计目的是实现图文环绕效果——让图片浮动到一侧，文字环绕在其周围。后来被开发者创造性地用于整体页面布局。

img {
  float: left;
  margin-right: 16px;
}

1.1 四个取值

取值	行为
`none`	默认值。元素不浮动，保持在正常文档流中。
`left`	元素浮动到包含块的左侧，后续内容环绕在右侧。
`right`	元素浮动到包含块的右侧，后续内容环绕在左侧。
`inline-start`	根据书写模式浮动到行首（`ltr` 时为左，`rtl` 时为右）。
`inline-end`	根据书写模式浮动到行尾。

1.2 浮动元素的行为特征

浮动元素呈现出一种独特的混合状态：它脱离了正常文档流，但又与绝对定位的完全脱离不同。

特征	说明
脱离正常流	浮动元素从正常文档流中移除，后续的块级元素会当作它不存在，占据其原本位置。
影响行内内容	虽然块级元素会无视浮动元素，但行内内容（文字、图片、`<span>` 等）会环绕浮动元素。这就是图文环绕效果的由来。
宽高收缩	若未显式设置 `width`/`height`，浮动元素的尺寸会收缩到刚好包裹内容（与 `inline-block`、绝对定位类似）。
始终为块级盒	无论元素原本是 `inline` 还是 `inline-block`，设置 `float` 后，它的计算 `display` 值会变为 `block`。
不会溢出包含块顶部	浮动元素不会超过其包含块的上边界（除非是嵌套浮动或负 margin）。
浮动元素之间不重叠	多个同方向浮动的元素会并排排列。若包含块宽度不足，后面的浮动元素会折行到下方。

1.3 图文环绕经典示例

<div class="article">
  <img src="photo.jpg" alt="配图" class="float-left">
  <p>这段文字会环绕在图片的右侧。浮动元素从文档流中移除，但其后的行内内容会感知到它的存在，并围绕它排列。如果文字足够长，它会在图片下方继续延伸，形成典型的图文混排效果。</p>
</div>

.float-left {
  float: left;
  width: 200px;
  margin: 0 16px 16px 0;
}

1.4 多栏布局（传统用法，仅供理解遗留代码）

在 Flexbox 普及之前，float 是创建多栏布局的主要手段。

.column {
  float: left;
  width: 33.33%;
  padding: 16px;
  box-sizing: border-box;
}

注意：在现代项目中，应使用 Flexbox 或 Grid 进行多栏布局。float 仅保留其原始用途——图文环绕。

2. 清除浮动：`clear` 属性与高度塌陷问题

2.1 高度塌陷：浮动最大的副作用

当一个父元素的所有子元素都浮动时，父元素会高度塌陷——其高度变为 0（或仅剩 padding 和 border），因为它认为内部没有处于正常流的子元素。

<div class="container" style="border: 2px solid red;">
  <div style="float: left; width: 100px; height: 100px; background: lightblue;">浮动 1</div>
  <div style="float: left; width: 100px; height: 100px; background: lightgreen;">浮动 2</div>
</div>

渲染效果：红色边框的容器高度为 0，两个浮动方块溢出到容器外部。

2.2 `clear` 属性：强制换行

clear 属性用于强制一个元素出现在浮动元素的下方，而不是环绕在它旁边。

取值	行为
`none`	默认值。允许元素两侧都有浮动元素。
`left`	元素必须出现在所有左侧浮动元素的下方。
`right`	元素必须出现在所有右侧浮动元素的下方。
`both`	元素必须出现在所有浮动元素（左侧和右侧）的下方。最常用。
`inline-start`	根据书写模式，出现在行首浮动元素下方。
`inline-end`	根据书写模式，出现在行尾浮动元素下方。

1
2
3

.footer {
  clear: both; /* 强制出现在所有浮动元素下方 */
}

clear 属性仅对设置了该属性的元素自身起作用，不会影响其他浮动元素。它通过在该元素的上外边距之上增加额外的清除空间来实现。

2.3 清除浮动的四种方法

方法一：空元素法（不推荐）

在浮动元素末尾添加一个空块级元素并设置 clear: both。

<div class="container">
  <div style="float: left;">...</div>
  <div style="float: right;">...</div>
  <div style="clear: both;"></div> <!-- 无意义的空元素 -->
</div>

缺点：污染 HTML 结构，引入无语义的空标签。

方法二：`overflow` 法

给父容器设置 overflow 为非 visible 的值（如 hidden、auto、scroll）。

1
2
3

.container {
  overflow: hidden; /* 或 overflow: auto */
}

原理：设置 overflow: hidden 会触发父容器创建块级格式化上下文（BFC），BFC 容器会自动包含其浮动子元素（见第 3 节）。

缺点：若容器内有需要溢出显示的内容（如 Tooltip、下拉菜单），会被裁剪。

方法三：`clearfix` 伪元素法（经典方案）

使用 ::after 伪元素在容器末尾生成一个不可见的块，设置 clear: both。

.clearfix::after {
  content: "";
  display: table; /* 或 block */
  clear: both;
}

为何使用 display: table？
display: table 可以防止清除元素与其前面的浮动元素之间产生不必要的垂直 margin 折叠。它是经过社区长期验证的最稳健写法。

完整用法：

<div class="container clearfix">
  <div style="float: left;">浮动 1</div>
  <div style="float: right;">浮动 2</div>
</div>

这种方法不引入额外的 HTML 标签，仅通过 CSS 解决，是 Flexbox 出现前的最优方案。在现代项目中，如果你确实需要处理浮动（如图文环绕场景），这仍是最佳选择。

方法四：`display: flow-root`（现代标准方案）

display: flow-root 是专门用来创建 BFC 的现代属性，不会产生 overflow: hidden 的裁剪副作用。

1
2
3

.container {
  display: flow-root;
}

优势：

语义清晰：唯一目的就是创建 BFC 并包含浮动。
无副作用：不会裁剪溢出内容。
浏览器支持：所有现代浏览器均支持（Chrome 58+、Firefox 53+、Safari 13+、Edge 79+）。

这是现代项目中清除浮动的首选方案。

3. 块级格式化上下文（BFC）——不只是清除浮动

块级格式化上下文（Block Formatting Context）是一个独立的渲染区域，其内部的布局规则与外部完全隔离，内部元素的布局不会影响外部元素。

3.1 创建 BFC 的条件

满足以下任一条件的元素会创建一个 BFC：

条件	示例
根元素（`<html>`）	天然的 BFC。
`float` 不为 `none`	`float: left`、`float: right`。
`position` 为 `absolute` 或 `fixed`	`position: absolute`。
`display` 为 `inline-block`	`display: inline-block`。
`display` 为 `flow-root`	专门创建 BFC 的现代属性，无副作用。
`display` 为 `table` / `table-cell` 等	`display: table-cell`。
`overflow` 不为 `visible`	`overflow: hidden`、`overflow: auto`。
`contain: layout`、`contain: paint`、`contain: strict`	`contain: layout`。
Flex/Grid 容器的直接子元素且非 `none`	若子元素不是 Flex/Grid 项目本身。

3.2 BFC 的三大核心特性

特性一：包含浮动子元素

这是 BFC 最常用的功能。BFC 容器会自动计算其内部所有浮动元素的高度，从而避免高度塌陷。

1
2
3

.container {
  display: flow-root; /* 创建 BFC，自动包含内部浮动元素 */
}

特性二：阻止外边距折叠

属于同一个 BFC 的两个相邻块级元素的垂直 margin 会折叠。但若将它们分别放入不同的 BFC，折叠就不会发生。

<div style="display: flow-root; background: lightblue;">
  <p style="margin-bottom: 20px;">我在 BFC 1 中</p>
</div>
<div style="display: flow-root; background: lightcoral;">
  <p style="margin-top: 30px;">我在 BFC 2 中</p>
</div>
<!-- 两个 p 之间的间距是 20px + 30px = 50px，不会折叠为 30px -->

特性三：防止被浮动元素覆盖

BFC 元素不会与浮动元素重叠。利用这一特性可以实现自适应两栏布局（一侧固定宽度浮动，另一侧创建 BFC 自动填充剩余空间）。

1
2

<div style="float: left; width: 200px; height: 300px; background: lightblue;">侧边栏</div>
<div style="display: flow-root; height: 300px; background: lightgreen;">主内容区域（BFC，不与浮动重叠）</div>

原理：BFC 区域不会与浮动元素的内容区域重叠。第二个 div 创建了 BFC，它会被浮动元素推开，自动占据剩余空间。

4. 浮动在现代 CSS 中的角色

随着 Flexbox 和 Grid 的全面普及，float 的布局使命已经终结。但在以下场景中，float 仍然是最佳——甚至是唯一正确的——选择：

场景	说明	替代方案
图文环绕	让文字环绕图片或插图。这是 `float` 的原始设计目的，目前仍无更优替代。	`shape-outside`（增强环绕形状）。
首字下沉	首字母浮动，文字环绕。	`initial-letter`（浏览器支持有限）。
阅读遗留代码	大量历史项目仍使用 `float` 布局，理解它是维护的基本要求。	逐步迁移到 Flexbox/Grid。
不兼容现代布局的老环境	极少数需要支持 IE9 以下浏览器的场景。	现代项目几乎不需要。

原则：在任何新的布局中，始终优先选择 Flexbox 或 Grid。仅在图文环绕等明确的环绕需求中使用 float。

课后练习

一、概念自测（选择题 / 填空题）

（单选） 当父容器的所有子元素都浮动时，父容器会发生什么？
A. 父容器会自动扩展以包含浮动子元素。
B. 父容器的高度会塌陷（变为 0 或仅剩 padding/border）。
C. 父容器会变为浮动元素。
D. 父容器的背景色会消失。
（单选） 以下哪种清除浮动的方法是现代项目中的首选方案？
A. 在浮动元素末尾添加空 <div style="clear: both;">
B. 给父容器设置 overflow: hidden
C. 使用 clearfix 伪元素（::after + clear: both）
D. 给父容器设置 display: flow-root
（填空） 要让一个元素不环绕左侧的浮动元素，而是出现在浮动元素下方，应设置 clear: ______。
（多选） 以下哪些 CSS 属性可以创建块级格式化上下文（BFC）？
A. overflow: hidden
B. display: flow-root
C. position: absolute
D. color: red

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要为一个博客文章页面实现图文环绕效果，同时避免浮动导致的布局问题。要求如下：

文章中有两张插图，第一张左浮动，第二张右浮动，文字分别环绕。
每张插图带有图注（<figcaption>），插图和图注使用 <figure> 包裹。
在图片和其后的一段文字结束后，需要有一个“分隔线”（<hr>），该分隔线必须出现在所有浮动元素下方（使用 clear: both）。
文章容器需要包含所有浮动元素，不能高度塌陷。使用 display: flow-root 解决。
插图需设置合适的外边距，使文字与图片之间有舒适的间距。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML 和 CSS。提示词中需明确指定 float 的方向、清除浮动的方法（clear 和 flow-root），以及 <figure> 和 <figcaption> 的语义用法。

三、面试真题与参考答案

题目（百度前端面试题）：

请解释什么是 BFC（块级格式化上下文），它有哪些特性？分别举例说明 BFC 如何解决以下三个问题：（1）父容器高度塌陷；（2）外边距折叠；（3）与浮动元素重叠。

参考答案：

1. BFC 定义：BFC 是页面上一个独立的渲染区域，区域内的布局规则与外部完全隔离，内部元素的定位和尺寸不会影响外部元素。

2. 三个核心特性及解决方案：

问题一：父容器高度塌陷
当父元素的所有子元素都浮动时，父元素高度会塌陷。解决方案：将父元素创建为 BFC（如设置 display: flow-root）。BFC 容器在计算高度时会自动包含其内部的浮动元素，无需额外清除浮动标记。
问题二：外边距折叠
同一 BFC 内相邻块级元素的垂直 margin 会折叠。解决方案：将其中一个元素或其父容器创建为新的 BFC。例如，将两个段落分别放入不同的 BFC 容器中，它们的 margin-bottom 和 margin-top 就不会折叠，而是累加。
问题三：与浮动元素重叠
当块级元素与浮动元素并列时，块级元素会“无视”浮动元素，导致二者重叠。解决方案：将块级元素创建为 BFC。BFC 元素的边界会避开浮动元素的边界，实现自适应两栏布局——浮动元素固定宽度在一侧，BFC 元素自动填充剩余空间且不重叠。

课后练习答案

一、概念自测答案

B
- 解析：这是经典的“高度塌陷”问题。父容器若无其他正常流子元素，其高度将塌陷为 0。
D
- 解析：display: flow-root 是现代标准方案，语义清晰无副作用。A 污染 HTML；B 会裁剪溢出内容；C 是经典方案但 D 更优。
**both**（或 left）
- 解析：clear: both 使元素出现在所有浮动元素下方，是最常用的清除值。
A、B、C
- 解析：overflow: hidden、display: flow-root、position: absolute 均可创建 BFC。color: red 与 BFC 无关。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请生成一个博客文章页面的 HTML + CSS，展示图文环绕效果。要求：

文章容器使用 display: flow-root 包含所有浮动元素。

包含两处插图，均使用 <figure> 包裹 <img> 和 <figcaption>。

第一张插图设置 float: left; margin: 0 20px 20px 0;，第二张插图设置 float: right; margin: 0 0 20px 20px;。

两段文字分别环绕各自的插图。

在第二段文字后插入一个 <hr>，设置 clear: both; 确保它出现在所有浮动元素下方。

图片可用 https://via.placeholder.com/300x200 等占位图。

代码整洁，注释说明每次使用 float 和清除浮动的理由。直接输出完整 HTML 文件。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/28/CSS-Float-Clear/

发表日期：July 28th 2026, 2:00:00 pm

更新日期：July 28th 2026, 10:27:15 am

Next Post

CSS-Fonts-and-Text-Styling
Previous Post

CSS-Positioning-Part2-Fixed-Sticky-Stacking-Context

CATALOG

1. 第20课：浮动与清除浮动——float、clear 与 BFC