Question

我注意到了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());

如果我在CSS文件中有0，则最后一行输出float: left;，如果我删除float: left;，则输出实际高度。这种行为的原因是什么？我可以将height()功能与float: left;一起使用吗？

Answer 1

当float个元素位于容器中时，该元素不会应用容器的高度，因为该元素不再位于“flow”中。它从当前元素中删除，并应用于它的父元素，因此问题。您可以使用inline-block或clear: both

进行修复

Answer 2

我通常使用0高度元素，同时清除容器中的最后一个子元素。这会导致容器在浮动对象周围“拉伸”：

<div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>

这是QuirksMode article的变体，具有良好的跨浏览器兼容性。

我已经重写了您的代码以包含它并演示结果：

<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">&nbsp;</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;">&nbsp;</div>
  </div>
</div>
<br>
<div id="output2">&nbsp;</div>

</body>

</html>

还可以在JSFiddle上查看演示。

Answer 3

因为floats从正常流中删除了元素。尝试使用overflow:hidden

请参阅 DEMO

了解更多详情http://www.quirksmode.org/css/clearing.html

Answer 4

floats从空间中删除元素，因此它占用0个空格。所以height()占用的空间是0

Answer 5

在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>

Answer 6

我在使用float进行更好的元素定位时遇到了同样的问题。但是，如果你（像我一样）事先知道元素的确切内容是什么，你可以在CSS类中添加一个带有值（例如height）的height: 30px属性，所以jQuery {{ 1}}方法确实有效。

CSS中的jquery.height（）和float参数

6 个答案: