CSS: CSS 浮动与清除
浮动（float）是 CSS 早期用于实现多列布局的主要方式。虽然现在 Flexbox 和 Grid 已经取代了它的大部分功能，但理解浮动仍然很重要——你会经常在旧的代码库中遇到它。
浮动属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
float |
left, right, none |
元素浮动方向 |
clear |
left, right, both, none |
清除浮动影响 |
1. float 属性
float 让元素"漂浮"在容器的一侧，其他内容会环绕它排列。
▶ 示例
HTML
<style>
.float-left {
float: left; /* 向左浮动 */
width: 120px;
background: #e3f2fd;
border: 1px solid #90caf9;
padding: 10px;
}
.float-right {
float: right; /* 向右浮动 */
width: 120px;
background: #fce4ec;
border: 1px solid #f48fb1;
padding: 10px;
}
.none {
float: none; /* 默认，不浮动 */
background: #e8f5e9;
border: 1px solid #81c784;
padding: 10px;
}
</style>
<div class="float-left">左浮动元素</div>
<div class="float-right">右浮动元素</div>
<div class="none">不浮动（正常文档流）</div>
(1) 浮动的基本行为
▶ 示例
HTML
<div class="container">
<img src="/assets/images/tutorials/html-example-photo.webp" alt="Sample image" style="float: left;">
<p>文字会环绕在图片的周围...</p>
</div>
(2) 浮动的特点
- 元素脱离正常文档流，但不完全脱离（文字会环绕）
- 块级元素宽度不再默认 100%，而是由内容决定
- 可设置宽高（即使是行内元素，设置了 float 后也能设置宽高）
- 元素会并排，直到容器宽度不够才换行
2. 浮动带来的问题
浮动最经典的问题就是高度塌陷——当子元素全部浮动时，父元素会"忘记"包裹它们：
▶ 示例
HTML
<style>
.parent {
border: 2px solid red;
/* 没有设置高度，希望由子元素撑开 */
}
.child {
float: left;
/* 浮动 */
width: 100px;
height: 100px;
background: #e3f2fd;
border: 1px solid #1976d2;
}
</style>
<div class="parent">
<div class="child">子元素1</div>
<div class="child">子元素2</div>
</div>
结果：父元素的边框紧贴顶部，子元素溢出了——因为浮动的子元素不占据文档流空间。
3. 清除浮动的方法
(1) 1. 使用 clear 属性（传统方法）
▶ 示例
HTML
<style>
.clearfix {
clear: both; /* 清除两侧的浮动影响 */
background: #f5f5f5;
padding: 10px;
}
</style>
<div class="clearfix">清除浮动（clear: both）</div>
需要在浮动元素的后面加一个空元素：
▶ 示例
HTML
<div class="parent">
<div class="child">子元素内容</div>
<div class="child">子元素内容</div>
<div style="clear: both;"></div> <!-- 空元素 -->
</div>
(2) 2. 父元素设置 overflow
▶ 示例
HTML
<style>
.parent {
overflow: hidden; /* 或 overflow: auto */
}
</style>
<div class="parent">父容器元素</div>
利用 BFC（块级格式化上下文）的特性。
(3) 3. 伪元素清除浮动（推荐）
这是目前最标准、最推荐的方法：
▶ 示例
HTML
<style>
/* 定义一个 clearfix 类 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 或者使用 table 方式 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix:">Clearfix:</div>
在 HTML 中给父容器添加 clearfix 类：
▶ 示例
HTML
<div class="parent clearfix">
<div class="child" style="float: left;">子元素内容</div>
<div class="child" style="float: left;">子元素内容</div>
</div>
(4) 4. 父元素也设置浮动
▶ 示例
HTML
<style>
.parent {
float: left; /* 父元素自己也浮动，就能包裹子元素了 */
}
</style>
<div class="parent">父容器元素</div>
但这会影响到父元素的布局，不推荐。
4. 现代替代方案
在现在的项目中，大多数浮动布局的需求都可以用 Flexbox 或 Grid 替代：
▶ 示例
HTML
<style>
/* 旧式：使用浮动 */
.old-layout {
overflow: hidden;
}
.old-layout .col {
float: left;
/* 浮动 */
width: 33.33%;
}
/* 现代：使用 Flexbox */
.modern-layout {
display: flex;
}
.modern-layout .col {
flex: 1;
}
</style>
<div class="old-layout">传统浮动布局</div>
<div class="old-layout">传统浮动布局</div>
<div class="col">列内容</div>
<div class="modern-layout">现代 Flex 布局</div>
<div class="modern-layout">现代 Flex 布局</div>
<div class="col">列内容</div>
5. 何时还会用到 float？
- 文字环绕图片——这是 float 的原始设计意图，Flexbox 反而做不了
- 维护旧项目——很多老项目仍用浮动布局
- 某些特定布局——如左对齐/右对齐的图文混排
(1) 文字环绕图片
▶ 示例
HTML
<style>
.article img {
float: left;
/* 浮动 */
margin-right: 15px;
margin-bottom: 10px;
}
</style>
<div class="article">这是一段文章内容，展示了文本排列效果</div>
<img src="/assets/images/tutorials/html-example-photo.webp" alt="Sample image">
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 重写一遍，对比两种方式的代码差异。
