Question

我几周前开始使用HTML和CSS，这种情况多次发生，我不知道为什么。

有时我会将背景应用于父元素，在其上添加内容，但父级的height会保留0而不是接收height个孩子。有时它确实（我认为应该是正确的行为吗？）

我的词汇表选择器获得0高度。因此，我的背景颜色不会显示。

.glossarySelector {
  background: #EFEFEF; 
}

<div class="glossarySelector">
  <ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
  </ul>
</div>

为什么？

您可以看到完整代码here。

Answer 1

编辑：这个SO答案提供了几种解决这个问题的方法，每种方法各有优缺点：https://stackoverflow.com/a/1633170/388916

如果元素没有子元素，或者使用position: absolute或浮动从页面流中删除子元素，则元素是完全平坦的（0px高度）。由于列表元素都有float: left，因此 glossarySelector 中没有更多元素可以扩展它的高度。

我看到你创建了一个名为“clearFix”的类。只需在 glossarySelector div中添加一个div，以修复浮动问题：

<div class="glossarySelector">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
    </ul>
    <div class="clearFix"></div>
</div>

小提琴：http://jsfiddle.net/gTKNk/12/

Answer 2

您可以在glossarySelector上使用“clearfix”。

.glossarySelector
{
     background: #000;
     overflow: hidden;
}

有关替代的clearfix方法，请参阅What methods of ‘clearfix’ can I use?。

Answer 3

“溢出：隐藏”是解决此问题的技巧。希望这会有所帮助。

.glossarySelector
    {
    background-color: #ff0000;
    overflow:hidden;
    }

示例here。

This answer解释有关明确修复的所有内容。

Answer 4

那是因为列表项float: left

上有<li>

你可以这样做：

.glossarySelector {
  background: #EFEFEF;
  overflow: hidden;
}

或add a clearfix

Answer 5

div的默认显示模式是“block”，在所有情况下都没有包含它的内容。您应该添加display: inline-block;

在您的代码中，由于ul {0}的left: 30px，列表仍会在右侧重叠，但如果您将其替换为margin-left:30px;或padding-left:30px;，它将会起作用很好;）

为什么有时父元素的高度为0px？

5 个答案: