为什么我的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. 使用demo在容器末端用块元素清除浮动clear:both;

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