jquery.height()返回0是因为父容器真实高度为0，源于浮动子元素脱离文档流导致高度塌陷；需用display:flow-root或clearfix强制创建bfc并触发重排才能正确读取高度。
jQuery.height() 返回 0 是因为父容器真实高度就是 0
不是插件 bug，也不是 jQuery 缓存或执行时机问题，而是 CSS 渲染层的事实：浮动子元素（float: left 或 float: right）脱离文档流，父容器在 layout tree 中的高度就是 0px。此时 offsetHeight、clientHeight、getBoundingClientRect().height 全部为 0，.height() 只是忠实地读取这个值。
常见现象包括：$('#parent').height() 是 0，但 $('#child').height() 正常；.outerHeight(true) 也无效——它只修正 margin 盒模型偏差，不解决“容器没高度”这个根源。
关键点在于：JS 读的是上一帧的 layout 数据，清除浮动样式后若不触发重排，读到的仍是旧值。
清除浮动必须在 JS 执行前完成，且要强制重排
加 clearfix 类或 display: flow-root 后直接调用 .height()，大概率还是 0。浏览器不会自动重排，JS 读取的是缓存 layout 值。
-
el.offsetHeight或getComputedStyle(el).height触发同步重排，之后再调用.height()才可靠 - 临时设
overflow: hidden再恢复，比伪元素更可控：$('#parent').css('overflow','hidden');<br>const h = $('#parent').height();<br>$('#parent').css('overflow',''); - 用
$('<div style="clear:both"></div>').appendTo('#parent')后，必须接el.offsetHeight才能确保重排生效
display: flow-root 是现代项目首选方案
display: flow-root 是专为解决此类问题设计的值（Chrome 58+ / Firefox 57+ / Safari 15.4+），一行生效，无伪元素、无重排开销、不裁剪内容。
兼容性兜底可写：
parent { display: flow-root; }<br>@supports not (display: flow-root) {<br> parent { overflow: hidden; }<br>}
注意：display: flex 或 display: grid 容器中，float 属性被规范忽略，此时加 clearfix 完全无效——说明布局方式已过时，该升级了。
最容易被忽略的三个细节
很多问题不是写法错，而是卡在边界条件：
- Chrome DevTools 默认不显示
::after，要手动勾选 “Show user agent shadow DOM” 才能看到伪元素是否渲染成功 - 父容器若写了
height或min-height，会覆盖clearfix带来的高度计算，优先检查这些显式值 - 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加
clearfix，外层加了不代表内层自动生效；若某层用了transform，还会干扰包含块，让高度再次失真
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
