为什么我的 div 没有高度？

Question

我正在尝试模仿 twitter 的引导 css 框架使用的行列机制。

我有一个 div，其中包含一些其他 div，这些 div 本身包含内容。在我的元素检查器中，它显示容器没有高度。 div的高度不应该是它包含的元素的高度吗？

<div class="container">
    <div class="row yellow">
        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>

        <div class="column-1 blue">
            column-1
        </div>

        <div class="column-1 green">
            column-1
        </div>

        <div class="column-1 orange">
            column-1
        </div>

        <div class="column-1 red">
            column-1
        </div>
    </div>
</div>

这是一个 jsfiddle：

HTML/CSS in question

Answer 1

高度或容器为 0 的原因是，您正在浮动其中的所有内容，并且浮动元素不会扩展其父级的高度（或宽度）。

当您在 row 中浮动所有元素时，它的高度为 0，因此 .container 也是如此。

为了防止这种情况，您可以：

1. 在容器上设置overflow:hidden; demo
2. 用clear:both;容器末尾的块元素清除浮动demo

您也可以查看此问题以供参考：How do you keep parents of floated elements from collapsing?