Html 如何防止两个div中的浮动内容重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7550000/
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
How to prevent floating content in two divs from overlapping?
提问by Seo
In a FAQ page I'm trying to make I have a page with this structure:
在 FAQ 页面中，我试图让我有一个具有以下结构的页面：
<section id="container">
<div id="faq_primary"></div>
<div id="faq_sidebar"></div>
</section>
<footer>
<div id="directory">
<div id="col_a"></div>
<div id="col_b"></div>
<div id="col_c"></div>
</div>
</footer>
Here is the relevant CSS:
这是相关的CSS：
#container {
width:960px;
margin: 0px auto;
position:relative;
}
#faq_primary {
width:720px;
margin:20px 40px 0 0;
position:relative;
float:left;
display:inline;
}
#faq_sidebar {
left:760px;
position:absolute;
}
footer {
width:1111px;
height:250px;
margin:90px auto 0px;
position:relative;
background-image:url(../images/footer/bg.png);
color:#7d7d7d;
}
#directory {
width:960px;
margin:0px auto;
padding-top:25px;
font-size:13px;
}
#directory ul li{
padding-bottom:4px;
}
#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole {
width:174px;
height:140px;
float:left;
}
#dir-cola {
width:150px;
}
#dir-cole {
width:143px;
}
My page content is found in the section container, and the footer is directly below. The faq_sidebaris much shorter than faq_primary, and because the columns in the footer are all floating left, they end up to the right of the faq_primary, below the faq_sidebar.
我的页面内容在部分中container，页脚在正下方。该faq_sidebar比要短得多faq_primary，因为在页脚中的列所有浮动离开，他们最终的faq_primary的权，faq_sidebar下方。
Here's a screenshot: 
这是一个屏幕截图：
Any advice so I can prevent the content in the footer and container from overlapping?
有什么建议可以防止页脚和容器中的内容重叠吗？
回答by James Khoury
Its hard to know without getting the same content as when i try thhis i can't produce the same as the screenshot. (Due to differences in content).
如果没有获得与我尝试时相同的内容，就很难知道我无法生成与屏幕截图相同的内容。（由于内容不同）。
But I'm pretty sure if you:
但我很确定你是否：
#container
{
// ... *snip*
overflow: hidden;
}
Will cause the container to include the floated children in its calculation for height.
将导致容器在其高度计算中包括浮动的孩子。
Also I would suggest you change the sidbar left: ...to right: 0if you are trying to p[osition it on the right (alternatively float: rightmight be correct instead of positioning absolute).
另外，我建议您将 sidbar 更改left: ...为right: 0如果您尝试将其放置在右侧（或者float: right可能是正确的，而不是绝对定位）。
EDIT:-I noticed one of the related questions had the same answer and i might be inclined to suggest that this is a duplicate. Question: Make outer div be automatically the same height as its floating content
编辑：-我注意到一个相关问题有相同的答案，我可能倾向于建议这是重复的。问题： 使外部div自动与其浮动内容高度相同
回答by Jason Gennaro
You could add a clearing divhere
您可以在此处添加清除 div
<div id="faq_sidebar"></div>
<div class="clear"></div>
</section>
and then style it like this
然后像这样设计
.clear{
clear:both;
}
If that doesn't do it, you may need to add it after the </section>
如果这不起作用，您可能需要在 </section>
回答by Saran
clear:both;
clear:left;
clear:right;
There are the property used to regulate and avoid to go to the image into adjust right side or left side of a previous div or image.
有用于调节和避免将图像调整到前一个 div 或图像的右侧或左侧的属性。
回答by Sonal Khunt
Remove left:760px;from #faq_sidebar.
删除left:760px;从#faq_sidebar。
回答by Andrew Briggs
If this is in a container:
如果这是在容器中：
<section id="container">
<div id="faq_primary"></div>
<div id="faq_sidebar"></div>
</section>
and you want them laid out inline why not style #container with display: inline. You are using absolute positioning for #faq_sidebar and that might be why the footer content is overlapping
并且您希望它们内联布局，为什么不使用 display: inline 设置 #container 样式。您正在为 #faq_sidebar 使用绝对定位，这可能就是页脚内容重叠的原因
