CSS: CSS 浮动与清除
最后更新：2026-10-13
浮动（float）是 CSS 早期用于实现多列布局的主要方式。虽然现在 Flexbox 和 Grid 已经取代了它的大部分功能，但理解浮动仍然很重要——你会经常在旧的代码库中遇到它。
⚠️ 历史包袱： float 最初设计是用来做"文字环绕图片"效果的，不是用来做页面布局的。后来开发者用它做多列布局，才出现了各种 clearfix hack。现在 Flexbox 和 Grid 已经完美取代了 float 布局。
✅ float 的正确用途： 图片配说明文字时，
float: left 让图片居左，文字自动环绕——这是 float 唯一"正确"的现代用法。做多列布局请用 Flexbox 或 Grid。
💡 记住 clearfix： 如果你必须用 float（比如文字环绕效果），父容器记得用 clearfix：
.clearfix::after { content: ""; display: block; clear: both; }。这是最经典的 float 闭合方案。虽然现在 Flexbox 和 Grid 已经取代了它的大部分功能，但理解浮动仍然很重要——你会经常在旧的代码库中遇到它。
浮动属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
float |
left, right, none |
元素浮动方向 |
clear |
left, right, both, none |
清除浮动影响 |
1. float 属性
float 让元素"漂浮"在容器的一侧，其他内容会环绕它排列。
▶ 示例
▶ 试一试(1) 浮动的基本行为
▶ 示例
▶ 试一试(2) 浮动的特点
- 元素脱离正常文档流，但不完全脱离（文字会环绕）
- 块级元素宽度不再默认 100%，而是由内容决定
- 可设置宽高（即使是行内元素，设置了 float 后也能设置宽高）
- 元素会并排，直到容器宽度不够才换行
2. 浮动带来的问题
浮动最经典的问题就是高度塌陷——当子元素全部浮动时，父元素会"忘记"包裹它们：
▶ 示例
▶ 试一试结果：父元素的边框紧贴顶部，子元素溢出了——因为浮动的子元素不占据文档流空间。
3. 清除浮动的方法
(1) 使用 clear 属性（传统方法）
▶ 示例
▶ 试一试需要在浮动元素的后面加一个空元素：
▶ 示例
▶ 试一试(2) 父元素设置 overflow
▶ 示例
▶ 试一试利用 BFC（块级格式化上下文）的特性。
(3) 伪元素清除浮动（推荐）
这是目前最标准、最推荐的方法：
▶ 示例
▶ 试一试在 HTML 中给父容器添加 clearfix 类：
▶ 示例
▶ 试一试(4) 父元素也设置浮动
▶ 示例
▶ 试一试但这会影响到父元素的布局，不推荐。
4. 现代替代方案
在现在的项目中，大多数浮动布局的需求都可以用 Flexbox 或 Grid 替代：
▶ 示例
▶ 试一试5. 何时还会用到 float？
- 文字环绕图片——这是 float 的原始设计意图，Flexbox 反而做不了
- 维护旧项目——很多老项目仍用浮动布局
- 某些特定布局——如左对齐/右对齐的图文混排
(1) 文字环绕图片
▶ 示例
▶ 试一试
HTML
<div class="article">
<img src="/assets/images/tutorials/html-example-photo.webp" alt="Sample image">
<p>这段文字会环绕在图片周围...</p>
</div>
❓ 常见问题
Q 现在做布局还用 float 吗？
A 不建议。float 最初是用来做文字环绕的，不是做布局的。现在 Flexbox 和 Grid 已经完美取代了 float 布局。只有在做"图片+文字环绕"效果时，float 仍然是正确选择。
Q clearfix 是什么？
A clearfix 是清除浮动影响的经典 hack。给父容器加
::after { content: ""; display: block; clear: both; }，让父容器"包裹"住浮动的子元素。如果用 Flexbox 或 Grid 就不需要 clearfix 了。Q float 元素的父容器高度塌陷了怎么办？
A 高度塌陷是因为浮动元素脱离了文档流，父容器感知不到它们的高度。解决方法：父容器设置
overflow: hidden、或者用 clearfix、或者干脆改用 Flexbox 布局。📖 小节
- 浮动曾经是 CSS 布局的主力，现在虽然被 Flexbox 和 Grid 取代了大部分功能，但理解和掌握它仍然必要
- 浮动最核心的问题是"高度塌陷"，最常见的解决方法是使用 clearfix 伪元素
- 如果你在做新项目，建议直接用 Flexbox 或 Grid；但如果你需要文字环绕图片的效果，float 仍然是最好的选择
📝 作业
- 创建一个图片和文字混排的页面，让图片浮动在左侧，文字环绕在图片周围。
- 使用 float 实现一个"三栏布局"——左栏 200px、右栏 200px、中间自适应。
- 演示"高度塌陷"问题，然后用至少三种方法解决（clearfix、overflow、伪元素）。
- 将上面的浮动三栏布局用 Flexbox 重写一遍，对比两种方式的代码差异。
