使用浮動時離開父母的div

Question

我看不到我的問題在哪裏。我嘗試了多方式，但我仍然有同樣的問題。正如標題所說，我有一個div到div。當在孩子身上使用浮球時，他離開父母div。儘管事實並非如此，但在設置邊界來檢查它時，這就是我所看到的。

#feed{ 
margin: auto; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-left: 10px; 
padding-right: 10px; 
width: 70%; 
float: center; 
} 

.news{ 
margin:auto; 
margin-top: 10px; 
padding-bottom: 5px; 
border: 1px solid; 
} 

.newsContent{ 
margin-top: 5px; 
margin-left:5px; 
margin-right:5px; 
background-color:red; 
} 

.newsContent p{ 
margin-left: 5px; 
margin-right: 5px; 
} 

.newsDate{ 
width: 20%; 
margin-top: 5px; 
margin-left:5px; 
margin-right:5px; 
float: right; 
background-color:red; 
} 

.newsDate p{ 
text-align: center; 
} 

和我的html代碼：

<div id="feed"> 
    <div class="news"> 
     <div class="newsContent"> 
      <p> ici nouveauté </p> 
     </div> 

     <div class="newsDate"> 
      <p> ici date </p> 
     </div> 
    </div> 
</div> 

謝謝。

Answer 1

添加

<div style="clear: both;"></div> 

孩子DIV之後，父DIV中。這將清除你應用到子div的浮動，並且應該給你你想要的效果。

Answer 2

你在找這樣的嗎？ http://jsfiddle.net/QPUzd/1/

這是因爲漂浮物的性質。你必須小心他們。

#feed{ 
margin: auto; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-left: 10px; 
padding-right: 10px; 
width: 70%; 
float: center; 
} 

.news{ 
margin:auto; 
margin-top: 10px; 
padding-bottom: 5px; 
border: 1px solid; 
float:left; 
} 

.newsContent{ 
margin-top: 5px; 
margin-left:5px; 
margin-right:5px; 
background-color:red; 
    float:left; 
} 

.newsContent p{ 
margin-left: 5px; 
margin-right: 5px; 

} 

.newsDate{ 
width: 20%; 
margin-top: 5px; 
margin-left:5px; 
margin-right:5px; 
float: right; 
background-color:red; 
} 

.newsDate p{ 
text-align: center; 
} 

Answer 3

添加下面的CSS規則父元素（.news在這種情況下）應該修復它：

overflow: hidden;

看到預覽這裏：http://jsfiddle.net/ChAQq/