如何通过清除浮动解决CSS中JQuery元素高度获取问题？

本文共计875个文字，预计阅读时间需要4分钟。

动态元素会引发父容器高度塌陷，使用jQuery的height()获取的值为0——这并非jQuery的bug，而是CSS中浮动脱离文档流后，父元素看不见的内容，自然算不出有效高度。

为什么 .height() 返回 0？

当父容器内只有 float: left 或 float: right 的子元素时，它不参与高度计算；.height() 读取的是内容区域高度，而此时内容区域被视为空。即使子元素有明确高度，父容器仍返回 0。

• 常见现象：$('#parent').height() 恒为 0，但 $('#child').height() 正常
• 不是 jQuery 缓存或异步问题，是 DOM 渲染层的真实状态
• display: none 和浮动塌陷会叠加恶化：隐藏 + 浮动 → 高度更不可靠

清除浮动后再调用 .height()

必须让父容器重新包含浮动子元素，才能让 jQuery 读到真实高度。推荐在获取前主动触发重排（reflow），而不是依赖样式类“存在即生效”。