CSS 浮动
03-css2026/11/14
CSS 浮动是一个历史悠久但非常重要的布局属性。虽然现代布局中 Flexbox 和 Grid 更常用，但理解浮动对于维护老代码和理解 CSS 发展历程仍然很有价值。
浮动 = 将元素脱离标准文档流，让其向左或向右“漂浮”，同时让文本或其他内联元素环绕它。
最初用于文字环绕图片，但在早期网页布局中也用作布局工具。
虽然浮动在现代布局中不再是首选，但理解它的工作原理对于：
- 维护老项目代码
- 理解 CSS 布局发展历程
- 处理特殊情况下的布局需求
浮动语法
.element {
float: left; /* 向左浮动 */
float: right; /* 向右浮动 */
float: none; /* 默认，不浮动 */
}
float: left→ 元素靠左，其他内容围绕右边float: right→ 元素靠右，其他内容围绕左边float: none→ 不浮动（默认）
浮动元素的特点
-
脱离文档流（Out of Normal Flow）
- 浮动元素本身脱离标准文档流
- 但会影响后续内联或行内元素
-
宽高行为
- 块级元素可自由设置宽高
- 内联元素浮动后表现为块级元素（可以设置宽高）
-
文本环绕
- 后续内联元素（如文字、span）会环绕浮动元素
-
父元素高度塌陷
- 浮动元素脱离文档流，父容器无法撑高
- 需要清除浮动（
clearfix或overflow）
浮动带来的问题及解决方案
问题 1：父元素高度塌陷
这是浮动最经典的问题！
<div class="parent">
<div class="float-child">浮动子元素</div>
</div>
<div class="next-element">下一个元素</div>
.parent {
border: 3px solid red;
padding: 10px;
}
.float-child {
float: left;
width: 200px;
height: 150px;
background: lightblue;
}
.next-element {
background: lightcoral;
padding: 20px;
}
问题现象： 父元素的红色边框会"塌陷"，高度为 0，因为浮动子元素不占据空间。
解决方案：清除浮动
方法 1：空元素清除法（传统）
<div class="parent">
<div class="float-child">浮动子元素</div>
<div style="clear: both;"></div>
</div>
方法 2：伪元素清除法（推荐）
<div class="parent clearfix">
<div class="float-child">浮动子元素</div>
</div>
.clearfix::after {
content: "";
display: table;
clear: both;
}
方法 3：创建 BFC（块级格式化上下文）
.parent {
overflow: hidden; /* 或 auto */
/* 或者 */
display: flow-root; /* 现代方法，无副作用 */
}
问题 2：浮动元素之间的空白间隙
HTML 中的换行符和空格会被解析，产生间隙。
问题代码：
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>