如何防止两个div中的浮动内容重叠？

Question

在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>

以下是相关的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;
}

我的页面内容位于container部分，页脚位于下方。 faq_sidebar比faq_primary短得多，并且因为页脚中的列全部向左浮动，所以它们最终位于faq_primary的右侧，位于faq_sidebar下方。

以下是截图：

任何建议，以便我可以防止页脚和容器中的内容重叠？

Answer 1

很难知道如果没有获得与我尝试时相同的内容，我无法生成与屏幕截图相同的内容。 （由于内容不同）。

但我很确定你是否：

#container
{
    // ... *snip*
    overflow: hidden;
}

将导致容器在计算高度时包含浮动的子项。

另外，我建议您将sidbar left: ...更改为right: 0，如果您尝试将其设置为右侧（或者float: right可能是正确的而不是定位绝对值）

编辑： - 我注意到其中一个相关问题的答案相同，我可能会倾向于认为这是重复的。问题：Make outer div be automatically the same height as its floating content

Answer 2

您可以在此处添加结算div

<div id="faq_sidebar"></div>

<div class="clear"></div>

</section>

然后像这样设置样式

.clear{
    clear:both;
}

如果不这样做，您可能需要在</section>

之后添加它

Answer 3

clear:both;
clear:left;
clear:right;

有一个属性用于调节和避免转到图像调整前一个div或图像的右侧或左侧。

Answer 4

如果这是在容器中：

<section id="container">

<div id="faq_primary"></div>

<div id="faq_sidebar"></div>

</section>

并且你希望它们内联布局为什么不用#container样式显示：inline。您正在使用#faq_sidebar的绝对定位，这可能是页脚内容重叠的原因

Answer 5

从left:760px;删除#faq_sidebar。