列溢出主div元素

Question

我正在尝试使用三列设置我的主页（每个列可能根据内容不同的高度），并且由于某种原因，我的'content'div中的列不尊重它。这会导致列溢出到下面的信息中。我尝试使用定位创建相同的布局，因为我理解它更好的做事方式;但是我没有运气。

我尝试使用'overflow'元素，它确实考虑了列，但然后在内容元素上放了一个滚动条。

请参阅我的工作示例here

1. 为什么这样做？ （编辑） - 理解

2. 我如何得到它，以便列位于 内容元素并尊重文档的流程？ （编辑） - 已解决

3. 您是否可以建议使用定位更好的方法？方法是我使用最好的定位方法，还是我应该使用相对，静态等？

Answer 1

1. 除非在某些情况下使用overflow: hidden（或类似），否则内容将溢出其边界框;请参阅CSS2规范中的overflow and clipping

2. 由于您要浮动三列，因此需要使用类似Clearfix之类的内容，以便在列容器之后的内容将清除它们。 （或者，您可以在包含页脚内容的clear: both上设置<p>。）

3. 浮动是接近多个列的常用方法，因此您正朝着正确的方向前进。几乎肯定定位对你没有帮助。

Answer 2

尝试将overflow：hidden添加到内容div并删除高度限制，如下所示：

#content
{
    background-color:Blue;

    width:800px;
overflow:hidden;

Answer 3

你正在浮动那些列，并且你没有清除浮动，所以发生的事情是那些3个div“浮动”高于其他所有，所以浏览器不会将它们包含在主html中。您必须使用CSS clear值清除浮动。

请参阅jsFiddle here

另请查看此tutorial