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() 将返回实际内容高度。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

<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。若需获取包括边框在内的总高度，应使用后者。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！