javascript - 在哪种情况下，父节点不包括 CSS 中子节点的高度？

Question

我在样式方面有问题，在某些情况下，父节点/div 不包括其子节点的高度。如果有人遇到这个问题，请给出原因。

例如

#id{
position:relative;
background:red;
}
.spacer{
  height:40px;
  position:relative;
}
<div id="x">
<div class="spacer" style="float:left;"></div>
<div class="spacer" style="float:left;"></div>
</div>

在我的 案例中，X 节点的高度不同于 80px(小于 80px)。为什么会这样？

我有很多代码，所以我无法发布所有这些。请给出任何理由。

Answer 1

float 元素不计入父元素的高度。

除非说 parent 有overflow:hidden。

(或者你可以使用 clearfix，但是 overflow:hidden 通常更好)<​​/p>