Html 为什么一个 <div> 与另一个 <div> 重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9332210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is one <div> overlapping another <div>?
提问by Preston
Here is my page's HTML:
这是我页面的 HTML：
<body>
<header></header>
<div class="conteudo_representantes"></div>
<div class="rodape"></div>
</body>
I have content inside the .conteudo_representantesdivthat is going over the .rodape(footer) div.
我在.conteudo_representantesdiv中的内容超过.rodape（页脚）div。
Here is my page's CSS:
这是我页面的 CSS：
.conteudo_representantes {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height:586px;
margin-top:40px;
position: relative;
}
.rodape {
position: relative;
width:960px;
height:50px;
margin:36px auto;
background:transparent url(../img/header_pattern.png) repeat top left;
}
The full page source can be found in this example. (Click on the second line of the list where it says: 02 - S?o Paulo - Capital, to see this problem in action.)
在这个例子中可以找到完整的页面源代码。（单击列表的第二行，其中显示：02 - S?o Paulo - Capital，以查看此问题的实际情况。）
What am I doing wrong?
我究竟做错了什么？
回答by RonnyKnoxville
The issue is that your div conteudo_representantesis not wrapping all of its contents properly, so the footer is in the correct relative position as far as it is concerned and the representantesdiv is overflowing for some reason
问题是您的 div conteudo_representantes没有正确包装其所有内容，因此就其而言，页脚处于正确的相对位置，并且代表div 由于某种原因溢出
EDIT:
编辑：
It is actually to do with the way you have managed your floatattributes.
这实际上与您管理float属性的方式有关。
Your div representantesfloats left, but the footer does not. You can test this by turning float:leftoff from the representantesdiv.
您的 div代表向左浮动，但页脚没有。您可以通过float:left从代表div 中关闭来测试这一点。
This is a common cause of divs overlapping.
这是 div 重叠的常见原因。
When laying out a HTML page, consider how each div element stacks onto the next. The floatelement will ultimately decide how the divs stack
布置 HTML 页面时，请考虑每个 div 元素如何叠加到下一个元素上。该float元素将最终决定的div怎么堆
Heres a quick guideto stacking elements correctly
这是正确堆叠元素的快速指南
回答by ayyp
If I'm correct, it's because you have min-heightspecified for #container. This allows it to grow should the content exceed that height. And because it's min-height, it's not pushing the footer down when the content grows larger.
如果我是对的，那是因为您min-height指定了#container. 这允许它在内容超过该高度时增长。并且因为它是min-height，所以当内容变大时它不会向下推页脚。
Update:Problem should be solved by adding a clear:bothproperty to the #footer.
更新：问题应该通过增加来解决clear:both财产的#footer。
