javascript - CSS 中的 jquery.height() 和 float 参数

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 文件中有 float: left;，最后一行输出 0，如果我删除 float: left;，则输出实际高度>。这种行为的原因是什么？我可以将 height() 函数与 float: left; 一起使用吗？

Answer 1

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

修复它