列溢出主div元素

Question

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

我试图使用'overflow'元素，它考虑了列，但是它会在内容元素上放置一个滚动条。

请看到我的工作here

1. 它为什么会做到这一点的例子吗？ （编辑） - 了解

2. 我如何得到它，因此列坐在 内容元素内并尊重文档流？ （编辑） - 解决

3. 你可以建议一个更好的方式来做到这一点，也许使用定位？我正在使用定位的最佳方式，还是应该使用相对，静态等方法？

Answer 1

1. 内容，除非您使用在某些情况下overflow: hidden（或类似）会溢出它的边框;请参见CSS2规范中的overflow and clipping

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

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

Answer 2

尝试增加溢出：隐藏到您的内容股利和删除高度限制，如下图所示：

#content 
{ 
    background-color:Blue; 

    width:800px; 
overflow:hidden; 

Answer 3

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

见的jsfiddle here

还检查了该tutorial