Question

我在样式方面存在问题，在某些情况下，父节点/ div不包含其子节点的高度。如果有人有这个问题，请说明理由。

e.g。

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

my案例height of X node is something different than 80px（小于80像素）。为什么会这样？

我有很多代码，所以我不能发布所有这些。请说明理由。

Answer 1

当父元素中的所有元素都浮动时，如果父元素的元素为＆＃39;高度未指定。这是一个简单解决方案的已知问题 - 您需要在父元素上使用clearfix。在这个例子中：

#x:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

我建议阅读Chris Coyier的优秀文章"All About Floats"，以获得深刻的解释和解决方案。

Answer 2

float ed元素不计入父级高度的一部分。

除非上述父母有overflow:hidden。

（或者您可以使用clearfix，但overflow:hidden通常更好）</ p>

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

2 个答案: