为什么我的div没有高度？

Question

我试图模仿twitter的bootstrap css框架使用的行列机制。

我有一个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

Answer 1

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

当你将所有元素row它的高度为0，因此具有.container 。

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

1. 设置overflow:hidden; 在容器演示
2. 用容器末端的块元件清除浮子，并clear:both; 演示

您还可以查看此问题以供参考： 如何让浮动元素的父母不会崩溃？