CSS浮动导致JS高度计算插件失效的修复方法
首先给出一个明确的结论：你遇到的 jQuery height() 返回 0 的问题，绝大多数情况下并非由插件 Bug、缓存机制或执行时机引起。真正原因在于 CSS 渲染层面，这是一个经典且容易忽视的陷阱。
jQuery.height() 返回 0 是因为父容器真实高度就是 0
别怀疑插件 Bug，也不必急于排查 jQuery 的缓存或异步问题。根本原因很简单：一旦子元素设置了浮动（float: left 或 float: right），它们就会脱离文档流，如同磁悬浮列车一般。父容器无法感知这些子元素的存在，因此在布局树（layout tree）中的真实高度就是 0px。
此时，无论是 offsetHeight、clientHeight 还是 getBoundingClientRect().height，读取到的都是 0。而 .height() 只是一个忠实的传话筒，如实反映了渲染层的实际情况。
这类问题有明显的特征：$('#parent').height() 返回 0，但 $('#child').height() 却正常；即使使用 .outerHeight(true) 也无济于事——因为 outerHeight 仅修正 margin 盒模型的偏差，无法解决“容器没高度”这个根源。
还有一个容易被忽略的关键点：JavaScript 读取的是上一帧的布局数据。换句话说，即使你在 CSS 中加入了清除浮动的样式，如果没有强制触发浏览器的重排（reflow），它读取的仍然是旧的缓存值。这才是问题的核心。
清除浮动必须在 JS 执行前完成，且要强制重排
很多人认为在父容器上添加 clearfix 类或设置 display: flow-root，然后直接调用 .height() 就能解决问题。但结果往往是 0。为什么？因为浏览器不会主动重新计算布局，除非你强制触发。
那么，如何彻底解决？
- 最直接的办法：调用
el.offsetHeight或getComputedStyle(el).height。这两个 API 会强制触发同步重排（force reflow）。只有重排完成后，再调用.height()，获取到的值才可靠。 - 另一种更可控的方式：临时给父容器设置
overflow: hidden，读取高度后再恢复。示例代码如下：$('#parent').css('overflow','hidden'); const h = $('#parent').height(); $('#parent').css('overflow','');这种方法比硬加伪元素更容易控制。 - 如果非要使用伪元素，比如动态插入一个
$('').appendTo('#parent')，那么后面必须跟随el.offsetHeight操作，否则重排不会触发。
display: flow-root 是现代项目首选方案
谈到解决方案，display: flow-root 可以说是专门针对这类问题设计的。Chrome 58+、Firefox 57+、Safari 15.4+ 均已支持，一行代码即可解决——没有伪元素、没有副作用，也不会意外裁剪内容。
如果需要兼容老环境，可以这样兜底：
parent { display: flow-root; }
@supports not (display: flow-root) {
parent { overflow: hidden; }
}
有一点必须警惕：如果父容器是 display: flex 或 display: grid，那么 float 属性在规范中被直接忽略。此时添加 clearfix 完全无效。这也说明你的布局方式已经过时，可以考虑升级为现代布局方案。
最容易被忽略的三个细节
很多时候，问题并不在于写法本身错误，而是卡在边界条件上。这里必须提三个容易踩坑的点：
- Chrome 的 DevTools 默认不显示
::after伪元素，你需要在设置中勾选 “Show user agent shadow DOM” 才能看到伪元素是否真正渲染。如果忽略这一点，可能白忙活半天。 - 如果父容器自身设置了
height或min-height，这些显式值会覆盖clearfix撑出的高度。排查时，优先检查这些硬编码的值。 - 在嵌套浮动的结构中，只有直接包裹浮动子项的容器才需要单独添加
clearfix。外层容器添加无效。而且，如果中间某一层使用了transform，它会干扰包含块的定位，导致高度计算再次失真。
