浮动导致父容器高度塌陷而非文字下沉，因浮动元素脱离文档流使父容器height为0px；解决首选display: flow-root创建bfc包容浮动子元素，兼容现代浏览器；老浏览器需完整clearfix四要素；根本应转向flex/grid布局。
浮动本身不会让文字“下沉”，但会让父容器高度塌陷，导致后续文字上移——看起来像下沉，其实是父级没撑住。
为什么文字看起来“沉”了或错位？
根本不是文字掉下去了，而是设置了 float 的子元素脱离文档流，父容器计算高度时直接忽略它们，结果 height 变成 0px。后续段落按正常流从顶部开始渲染，自然叠在浮动元素下方或右侧，视觉上就像文字被顶开、错行、甚至被遮挡。
- 用开发者工具选中父容器，在 Computed 面板里看
height是否为0px或远小于预期 - 勾选 Chrome DevTools 的 “Show layout bounds”，能一眼看出浮动元素悬空、父容器边界塌缩
- 常见误判：给文字加
margin-top临时下拉，但这只是掩盖问题，父容器依然塌陷，响应式下立刻失效
必须清除浮动，且推荐 display: flow-root
display: flow-root 是专为解决这类问题设计的值，它创建一个新的块级格式化上下文（BFC），让父容器主动包含所有浮动子元素，无需 hack，也不裁剪内容。
- 一行生效：
.container { display: flow-root; } - 兼容性足够：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+，现代项目可直接用
- 比
overflow: hidden安全：不意外截断position: absolute弹层、阴影、transform元素，移动端无 fixed 定位异常风险 - 比伪元素
::after更轻量：不增加渲染节点，无content触发重排开销
如果必须兼容老浏览器，clearfix 怎么写才不翻车？
很多项目复制的 clearfix 少写了关键项，导致在旧版 UC、QQ 浏览器或某些安卓 WebView 中完全无效。
- 四要素缺一不可：
content: ""+display: table+clear: both+height: 0 - 错误写法：
.clearfix::after { clear: both; }—— 没content，伪元素根本不生成 - 危险写法：
display: block—— 在 IE 和部分移动内核中可能误把行高当高度，撑出额外空白 - 稳妥写法：
.clearfix::after { content: ""; display: table; clear: both; height: 0; }
行高不一致时，line-height 必须用无单位数值
浮动子元素若含文本，line-height 不统一会放大高度差异，加剧换行错乱。固定像素值（如 line-height: 24px）在不同字号下必然失衡。
- 正确做法：统一设
line-height: 1.5（无单位），它会按当前font-size自动缩放 - 所有浮动项（如
.card、.item）都要显式声明，别依赖继承 - 含图标或图片时，加
vertical-align: middle对齐基线，否则即使line-height相同也会视觉偏移 - 单行文本可加
overflow: hidden+text-overflow: ellipsis，避免换行干扰高度计算
真正难的不是加哪一行 CSS，而是意识到：浮动塌陷从来不是孤立样式问题，而是布局模型已过时的信号。一旦你开始反复调试 clear、overflow、line-height 的组合，就该考虑把 float 从布局逻辑里彻底拿掉了——display: flex 或 grid 下，这些“异常”压根不会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
