父容器 scrollheight 为 0 是浮动脱离文档流的必然结果；因浮动元素不参与高度计算，浏览器无法统计其内容高度，display: flow-root 可创建 bfc 使 scrollheight 正确计算。
父容器 scrollHeight 为 0 是浮动脱离文档流的必然结果
浮动元素（float: left 或 float: right）会完全脱离标准文档流，不参与父容器的高度计算。浏览器在计算 scrollHeight 时，只统计“仍在流内”的内容高度；一旦所有子元素都浮动，父容器的 scrollHeight 就会退化为 0 或极小值——不是 bug，是 CSS 规范定义的行为。
用开发者工具选中父容器，在 Computed 面板里对比 height 和 scrollHeight：若两者都接近 0px，而你眼睛明明看到内容撑开了视口，那基本就是这个原因。
overflow: auto 不触发滚动，是因为它没“看见”溢出
overflow: auto 的滚动判定逻辑依赖两个值：容器自身的高度（clientHeight）和内容实际占据高度（scrollHeight）。当浮动导致 scrollHeight 被低估，浏览器就认为“内容没溢出”，自然不显示滚动条——哪怕你拖动鼠标发现内容确实能继续向下。
- 临时把父容器的
overflow改成visible，如果内容突然“弹出来”并填满空间，说明是scrollHeight计算失效，不是内容真没高度 - 别给父容器加固定
height或max-height来“凑数”：这会让scrollHeight依然为 0，但强制截断内容，滚动行为更不可预测 - 加
border: 1px solid red到父容器上，是最快验证是否塌陷的方法：边框缩成一条线或完全不可见，就是塌陷实锤
display: flow-root 是修复 scrollHeight 的现代解法
display: flow-root 显式创建一个新的块级格式化上下文（BFC），让父容器重新“感知”浮动子元素的真实尺寸，从而正确计算 scrollHeight。它不裁剪内容、不干扰定位、语义明确，且滚动条按真实溢出触发。
注意这些细节：
- 必须加在**浮动子元素的直接父容器**上，加在祖先层无效
- 不要和
float同时写在一个元素上：float会让该元素自身也脱离流，与flow-root语义冲突 - Safari 在 v15.4 之前对
flow-root的scrollHeight计算有偏差，旧项目建议加降级：.parent { display: flow-root; } .parent:not(:has(*)) { overflow: hidden; }（仅作示意，实际需配合伪元素）
动态插入的浮动元素最容易绕过你的 CSS
第三方脚本、CMS 插件、广告 SDK 常会往 DOM 中注入带 float 的元素（比如右上角的悬浮按钮、侧边推荐栏），它们不走你写的 .clearfix 类，也不受 flow-root 父容器约束——只要插在某个已塌陷容器内部，就会立刻破坏 scrollHeight。
这种问题没法靠一套 CSS 规则兜底，得靠 DevTools 主动排查：
- 在 Elements 面板中按
Ctrl+F（Win）或Cmd+F（Mac），搜[style*="float"]或float: - 逐个检查匹配到的元素，看它是否落在一个没清除浮动的父容器里
- 临时给那个父容器手动加
display: flow-root，观察scrollHeight是否恢复正常
真正难处理的从来不是写对一行 CSS，而是那些你没声明、没控制、却在运行时悄悄改变布局树的浮动节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
