html - float div 没有正确放置

Question

我遇到的问题是页脚 div 一直在右侧 div 后面上升。我有一个包含 div 的中间部分，其中 2 个 float div 并排放置，页脚是一个单独的 div，不确定我哪里出错了，但我已经处理了几个小时，无法解决问题。

这是我的意思的 js fiddle :http://jsfiddle.net/VU3xW/

HTML:

    <div id="middlecontainer">

        <div id="leftContent">

        </div> <!-- end of left content -->


        <div id="rightContent">

             </div> <!-- end of right content -->

</div> <!-- end of middle container -->

<div id="footer">
            <p class="footernav"><a href="">Home</a> | <a href="">About</a> | <a href="">Products</a> | <a href="">Contact</a>
            </p>

            <p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
        </div> <!-- end of footer div -->

CSS:

    #rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}

Answer 1

你缺少的是清除 float 元素

Demo

只需添加这个 <div style="clear: both;"></div>在容器元素的末尾，您还可以使用 overflow: hidden; 清除 float 为 parent div .同样出于演示目的，我添加了内联样式，您可以从中创建一个类并使用它来代替被认为是不良做法的内联样式。

另外如果你想清除 float 元素，你可以使用它来 self 清除父元素。

.self_clear:after { /* Use this if you wish to ditch IE8 */
   content: " ";
   display: table;
   clear: both;
}

<div class="self_clear"> <!-- Example usage -->
   <div class="floated_left"></div>
   <div class="floated_right"></div>
</div>

This answer我的将提供详细的解释，为什么你需要使用 clear: both;