父容器高度塌陷导致jquery的.height()返回0，根本原因是浮动子元素脱离文档流，父元素无法感知其尺寸；需通过clearfix、overflow:hidden或现代flexbox/grid重建bfc才能获取真实高度。
浮动子元素会导致父容器高度塌陷，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），而不是依赖样式类“存在即生效”。
- 给父元素临时加
overflow: hidden，再立刻读取：$('#parent').css('overflow', 'hidden');<br>const h = $('#parent').height();<br>$('#parent').css('overflow', ''); // 恢复 - 或插入清除元素并强制重排：
$('#parent').append('<div style="clear:both"></div>');<br>$('#parent')[0].offsetHeight; // 触发重排<br>const h = $('#parent').height(); - 避免用
.show()/.hide()切换——它们改的是display，对浮动塌陷无修复作用
outerHeight() 不能绕过浮动塌陷
.outerHeight() 只解决盒模型（padding/border）带来的偏差，不解决“父容器没高度”这个根源问题。如果父容器本身渲染高度就是 0，.outerHeight() 同样返回 0。
- 验证方式：
$('#parent')[0].offsetHeight和$('#parent').height()会一致为 0 - 不要误以为加了
true参数（含 margin）就能“唤醒”塌陷容器 - 真正要改的是父容器的 BFC 状态，不是 jQuery 方法选哪个
现代写法：别等 jQuery 去“抢救”浮动布局
如果你还在用 float 做布局，并靠 jQuery 读高度做后续逻辑（比如动画、适配、tab 内容区撑开），说明结构已处于高维护风险中。Flexbox 或 Grid 下，浮动自动失效，父容器高度天然正确，.height() 不再需要“抢救”。
-
display: flex后，float属性被忽略，子元素不再脱离文档流 - 老项目升级时，优先在关键容器上替换
float，而非堆砌clearfix+ jQuery 补丁 - 混合使用
float和position: absolute时，清除浮动也不等于能正确计算高度——绝对定位又脱离了
最易被忽略的一点：很多团队以为加了 clearfix 类就万事大吉，但 jQuery 获取高度的操作若发生在样式应用前（比如 DOM 插入后立即读），依然拿不到数——得确保样式已生效、浏览器已完成 layout 计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
