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

Question

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

有时，我将背景应用于父元素，并在其上包含一些内容，但父元素的 height 保持 0 而不是接收 height children 的。有时确实如此(我认为这应该是正确的行为，不是吗？)

我的lossarySelector 的高度为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

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

---

当元素没有子元素或者使用 position:absolute 或 float 从页面流中删除子元素时，该元素是完全平坦的(0px 高度)。由于列表元素都具有 float: left，因此 glossarySelector 内不再有元素来扩展其高度。

我看到您创建了一个名为“clearFix”的类。只需在 glossarySelector div 中添加一个具有该类的 div 即可修复 float 问题:

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

fiddle :http://jsfiddle.net/gTKNk/12/