浮动导致父容器高度塌陷，文字上移本质是父容器缩为0高；应通过触发BFC（如伪元素clear:both）或改用flex/grid布局来根本解决。
浮动元素导致父容器高度塌陷，文字上移
这是浮动最典型的副作用：
元素脱离文档流，父容器无法感知其高度，导致后续内容（比如段落文字）直接“顶上来”，看起来像上移了。本质不是文字动了，而是父容器缩成 0 高，文字自然落到它上面。
检查父容器是否没设
，也没触发 BFC（块级格式化上下文）
用
浏览器
开发者工具选中父容器，看它的实际高度是不是
确认子元素是否用了
或
，且未被清除
用
清除浮动
的几种方式
本身不解决父容器塌陷，它只是让某个元素“避开”浮动区域。真正起作用的是在父容器内部加一个清除元素（或
伪元素
），从而撑开高度。
在父容器末尾加空标签：
更推荐用伪元素（避免冗余 HTML）：
注意：
比
更稳妥，能兼容老版 IE
/
只清除对应方向的浮动，除非明确需要，否则统一用
为什么有时加
看似“修好”了，但不推荐
给下方文字加
，只是把文字强行往下推，父容器依然塌陷。这属于视觉欺骗，会带来连锁问题：
如果后续新增内容或改样式，这个 magic number（比如
）很快失效
响应式断点下，浮动高度变化，固定 margin 就错位
父容器如果有背景色、边框或阴影，会完全不可见——这才是真正的 bug
移动端 touch 区域、无障碍阅读器都可能因结构错乱出问题
现代替代方案：优先用
或
浮动本就不是为布局设计的，CSS3 布局方案更可靠。只要父容器支持 Flex 或 Grid，就别用
做布局。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
Flex 替代左右浮动：
Grid 更适合复杂
排列
：
如果必须兼容 IE9 及以下，才考虑
；其他情况，清除浮动只是过渡手段
浮动塌陷的问题看似简单，但很多人只盯着“文字位置”，忽略了父容器结构已损坏。真正要 fix 的从来不是那行文字，而是整个容器的高度感知能力。
floatheight0pxfloat: leftfloat: rightclearclear
.wrapper::after {
content: "";
display: table;
clear: both;
}display: tableblockclear: leftrightbothmargin-topmargin-topmargin-top: 20pxdisplay: flexdisplay: gridfloat.wrapper {
display: flex;
}
.float-box {
/* 不需要 float */
flex: 0 0 200px; /* 类似 float:left 的宽度控制 */
}.wrapper {
display: grid;
grid-template-columns: 200px 1fr;
}float + clearfix