列溢出主div元素

Question

我试图设置我的主页三列(每个可能是不同的高度取决于内容)，出于某种原因，在我的‘内容’div中的列不尊重它。这将导致列溢出到下面的信息上。我尝试使用定位创建相同的布局，因为我理解它是一种更好的方法；然而，我没有运气。

我尝试使用“overflow”元素，它确实考虑到了列，但是它随后在content元素上放置了一个滚动条。

请看我的作品这里示例

1. 它为什么要这么做？(编辑)-理解
2. 如何获得它，使列位于content元素中，并尊重文档的流？(编辑)-解决
3. 你能建议一种更好的方法来做这个，也许使用定位吗？我使用的方法是最好的定位方式，还是应该使用相对的、静态的等等？

Answer 1

1. 内容将溢出其边界框，除非在某些情况下使用overflow: hidden (或类似的)；参见CSS2规范中的溢流和裁剪
2. 由于您正在浮动您的三列，您需要使用类似于Clearfix的内容，这样列容器之后的内容就可以清除。(或者，您可以在包含页脚内容的clear: both上设置<p>。)
3. 浮动是接近多个列的常见方法，因此您正朝着正确的方向前进。几乎可以肯定的是，在这里定位对你没有任何帮助。

Answer 2

尝试添加溢出:隐藏到内容div并删除高度限制，如下所示：

#content
{
    background-color:Blue;

    width:800px;
overflow:hidden;

Answer 3

您正在浮动这些列，并且没有清除浮点数，因此所发生的情况是，这3个div“浮动”在其他所有内容之上，因此浏览器不将它们包含在主html中。必须使用CSS clear值清除浮点。

见jsFiddle 这里

还请查看此教程