jQuery.height() 返回 0 是因父容器真实高度为 0px：子元素浮动脱离文档流，父容器无法撑高；需清除浮动并强制重排（如读 offsetHeight）才能获取正确值。
jQuery.height() 为什么返回 0
不是 jQuery 读错了，也不是 DOM 没渲染完，而是父容器在浏览器 layout tree 里**真实高度就是 0px**。只要子元素用了 float: left 或 float: right，它们就脱离文档流，父容器计算高度时“看不见”它们，offsetHeight、getBoundingClientRect().height、$.height() 全部返回 0。
常见误判点：
- 以为加了
clearfix类就万事大吉——但没触发重排，JS 仍读缓存值 - 用
overflow: hidden后看 DevTools 里高度“回来了”，却没验证下拉菜单是否被裁剪 - 把清除样式加在祖父级上，而锚点目标的直接父容器仍是塌陷的
清除浮动后 JS 还读不到高度？检查重排是否发生
清除浮动（比如加 display: flow-root 或伪元素）只是让父容器“有能力”撑高，但浏览器不会自动重排。JS 读的是上一帧的 layout 数据，必须强制触发一次重排，才能拿到新高度。
可靠做法：
- 加完清除样式后，立即读取
el.offsetHeight（哪怕只赋值给一个临时变量），它会同步触发重排 - 避免用
getComputedStyle(el).height单独调用——它不保证重排，可能还是旧值 - 慎用
setTimeout(() => height = $(el).height(), 0)：异步延迟不可靠，尤其在动画帧密集时
display: flow-root vs overflow: hidden，选哪个
display: flow-root 是专为此设计的属性，创建 BFC 且无副作用；overflow: hidden 是借 BFC 的副作用，但会裁剪所有溢出内容。
关键差异：
-
display: flow-root兼容 Chrome 58+、Firefox 57+、Safari 10.1+，2026 年绝大多数项目可直接用 -
overflow: hidden在 iOS Safari 中可能误判 transform 元素为溢出，导致滚动卡顿或 touch 失效 - 如果父容器有
box-shadow或子元素用transform: translateY(-10px)上移，overflow: hidden会把它切掉一半
现代布局下，别再手动清浮动
如果你还在 JS 里动态加 clearfix 再读高度，说明布局结构已处于维护风险中。Flexbox 和 Grid 下，float 被忽略，子元素天然参与父容器高度计算，$.height() 直接可用。
真要保留 float 场景（比如文字环绕图片），也应限制在语义明确的局部，而非整页导航或多栏布局。混用 float 和 display: flex 是反模式——行为不可控，调试成本远高于重构。
真正容易被忽略的是：清除浮动只是补救，不是设计。JS 读不到高度，从来不是脚本的问题，而是 CSS 布局已经失焦的信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
