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

Question

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

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

我的 glossarySelector 获得 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 或 floating 从页面流中移除子元素，则该元素是完全平坦的(高度为 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/