浮动导致父容器高度塌陷，JavaScript读取offsetHeight会失真；解决核心是清除浮动（如overflow:hidden或clearfix伪元素）或强制重排（读取offsetHeight等触发reflow），优先修复CSS而非依赖脚本兜底。
浮动元素会脱离文档流，导致父容器高度塌陷，此时 JavaScript 读取 offsetHeight 得到的是“视觉上未包裹浮动子元素”的高度（常为 0 或过小），造成计算错误。解决核心是让父容器正确包含浮动，或强制触发浏览器重排（reflow），使尺寸计算基于最新布局。
确保父容器清除浮动（推荐）
这是最稳定、语义清晰的方案。让父容器感知浮动子元素的高度，自然撑开自身，后续脚本读取 offsetHeight 就能拿到真实值。
- 给父容器加
overflow: hidden或overflow: auto（注意可能影响滚动和裁剪） - 使用伪元素清除法（现代通用写法）：
.clearfix::after { content: ""; display: table; clear: both; }然后在 HTML 中为父容器添加class="clearfix" - 若用 Flex 或 Grid 布局，直接替换浮动——它们天然不塌陷，无需额外处理
手动触发强制重排（force reflow）
当无法修改 CSS（如第三方组件）、或需动态插入浮动元素后立即读高时，可主动触发一次重排，让浏览器同步更新布局信息。
- 常见写法：在读取
offsetHeight前，读一个强制依赖布局的属性，例如：element.offsetHeight; // 触发 reflowconst h = element.offsetHeight; // 再次读取，此时已更新 - 其他可触发重排的属性包括：
offsetTop、offsetLeft、getBoundingClientRect()、scrollHeight等 - ⚠️ 注意：频繁强制重排会影响性能，仅在必要时使用，避免在循环或动画帧中调用
用 getComputedStyle 配合 clientHeight 更稳妥？
clientHeight 和 offsetHeight 行为类似，同样受塌陷影响；getComputedStyle 返回的是 CSS 计算值（不含浮动撑高后的实际渲染高度），不能替代。真正可靠的仍是让父容器包含浮动，或用 getBoundingClientRect().height（它反映渲染后的真实尺寸，但同样依赖父容器已正确布局）。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。优先修复 CSS 结构，清除浮动或换用现代布局；脚本层 force reflow 是兜底手段，别滥用。
