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