css浮动导致jquery获取高度为零，是因为浮动元素脱离了标准文档流，其父容器在计算高度时无法感知到这些子元素的存在。要解决这个问题，必须对父容器应用清除浮动的样式（如 overflow: hidden 或伪元素法），确保父容器能够包裹住内部的浮动元素，这样 height() 才能返回正确的数值。
为什么未清除浮动的父容器高度为0
当子元素设置 float: left 后，它们不再占据父容器的空间。如果父容器没有显式的高度且内部只有浮动元素，其计算高度将为零。此时调用 jQuery 的 .height() 方法，自然得到 0。
<div class="parent"> <div class="child" style="width:100px;height:100px;float:left;background:red;"></div> </div> <script> console.log($(\'.parent\').height()); // 输出 0 </script>
预期结果：控制台打印 0。
立即学习“前端免费学习笔记（深入）”；
如何通过 overflow 修复高度问题
给父容器添加 overflow: hidden 可以触发 BFC（块级格式化上下文），使父容器自动包含内部的浮动元素。修复后，height() 将返回实际内容高度。
<style>
.parent {
overflow: hidden;
}
</style>
<div class="parent">
<div class="child" style="width:100px;height:100px;float:left;background:red;"></div>
</div>
<script>
console.log($(\'.parent\').height()); // 输出 100
</script>预期结果：控制台打印 100。
使用 height() 与 outerHeight() 的区别
在父容器已正确包裹浮动元素的前提下，height() 仅返回内容区域的高度，而 outerHeight() 会额外包含 padding 和 border。若需获取包括边框在内的总高度，应使用后者。
