我注意到一个奇怪的jquery.height()函数行为。看看下面的代码。
CSS：
div.text-field {
font-family: sans-serif;
margin: 3px;
float: left;
}
HTML：
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
JS：
console.log($("someid").find("text-holder").height());
0如果我float: left;在 CSS 文件中，最后一行输出，如果我删除，则输出实际高度float: left;。这种行为的原因是什么？我可以将height()函数与 一起使用float: left;吗？
当float元素在容器内时，该元素不会应用容器的高度，因为该元素不再处于“流”中。它从当前元素中删除，并应用于它的父元素，因此出现了问题。您可以通过使用来修复它inline-block，或clear: both
我通常使用一个高度为 0 的元素，并将两者都作为容器中的最后一个子元素。这会导致容器围绕浮动对象“拉伸”：
<div style="clear: both; line-height: 0; height: 0;"> </div>
这是QuirksMode 文章的变体，具有良好的跨浏览器兼容性。
我已经重写了您的代码以包含它并演示结果：
<html>
<head>
<title>test</title>
<style type="text/css">
div.text-field
{
border: 1px solid red;
font-family: sans-serif;
margin: 3px;
float: left;
}
div.text-holder
{
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#output1").text($("#someid1 .text-holder").height());
$("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>
<body>
<div id="someid1">
<div class="text-holder">
<div class="text-field">text here</div>
</div>
</div>
<br>
<div id="output1"> </div>
<br><br><br>
<div id="someid2">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>
</div>
<br>
<div id="output2"> </div>
</body>
</html>
该演示也可以在JSFiddle上查看。
floats从空间中删除元素，因此它占用 0 空间。height()它占用的空间也是0
在 jQuery 中，测试脚本如下所示：
console.log($("#someid").find(".text-holder").height());
如果您修改 html 以清除浮动，则父级将获得高度：
<div id="someid">
<div class="text-holder">
<div class="text-field">text here</div>
<div style="clear: both;"></div>
</div>
</div>
我在使用float更好的元素定位时遇到了同样的问题。但是，如果您（像我一样）事先知道元素的确切内容是什么，您可以在 CSS 类中添加一个height带有值的属性（例如height: 30px），这样 jQuery.height()方法就可以工作了。