浮動div沒有正確坐在

Question

我遇到的問題是頁腳div不斷上升在右側div後面。我有一箇中間包含2個浮動div並排的div，頁腳是一個單獨的div，不確定我在哪裏出錯了，但我已經在這裏呆了好幾個小時，不能解決問題。

這裏是什麼，我的意思是一個js小提琴：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

你所缺少的就是清除浮動元素

Demo

只需在容器元素的末尾添加此<div style="clear: both;"></div>，您還可以使用overflow: hidden;爲父代div清除浮動。另外爲了演示的目的，我已經添加了樣式內聯，你可以使用它，並使用它，而不是內聯樣式，這被認爲是不好的做法..

另外，如果你想清除浮動元素，你可以使用它來自行清除父元素。

.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;

Answer 2

先給你一個middlecontainer溢出：汽車性能。

Answer 3

嘗試添加清除用div

#clear{ 
    clear:both; 
} 

這裏是小提琴http://jsfiddle.net/swDnn/1/

希望它可以幫助...

Answer 4

試試這個

http://jsfiddle.net/VU3xW/4/

#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 5

您的頁腳需要清除所以加明確：就是每個浮動DIV之後無論是在#footer的

#footer { 
    clear:both; 
     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;}