为什么我的div没有高度？

Question

我正在尝试模仿twitter的bootstrap 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. 在容器 demo
上设置overflow:hidden;
2. 使用clear:both; demo
在容器末端使用块元素清除浮动

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

Answer 2

因为您没有为容器指定高度。这就是为什么当你检查元素时，没有高度。