浮動元素不包括在父，引起下邊距問題

Question

對，所以我有一個網頁的部分：

<div class="article"> 
    <div class="author"> 
     <img src="images/officers/john_q_public_thm.jpg" /> 
     <span class="name">John Q. Public</span> 
     <span class="position">President</span> 
    </div> 
    <abbr class="postdate"> 
     <span class="month m-01">Jan</span> 
     <span class="day d-31">31</span> 
     <span class="year y-2009">2009</span> 
    </abbr> 
    <div class="content"> 
       <h2 class="title">Article Title</h2> 
       <p>Pellentesque habitant morbi...facilisis luctus, metus</p> 
       <p>Pellentesque habitant morbi...facilisis luctus, metus</p> 
    </div> 
</div> 
<div class="article">...</div> 
<div class="article">...</div> 

的author和abbr的div是向左浮動。這些article div中的每一個都需要與它的兄弟姐妹分開5px左右。但是，author div正在超出div的技術「高度」。 margin-bottom沒有做任何事情，因爲空間被浮動的author佔用。

這有點難以設想，所以我把它放在a server上。

有沒有辦法強制父母至少與所有浮動元素一樣高？

如果有人知道我在說什麼，謝謝。

Answer 1

可以/對div.article內（關閉DIV前右）

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

把這個底部還是這樣做：

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ 

Answer 2

您需要在浮動元素之後添加清除元素。 像這樣的東西通常工作<br clear="both"/>這將清除左側和右側的浮游物，並「填充」你的包含元素。

您可以指定both，left和right，其中清除所有浮動元素，相應地浮動和右浮動。

Answer 3

除了上述黑客，您可以在article div上設置overflow:auto;，雖然這可能會有副作用，具體取決於您對這些div有哪些其他規則。但它可以防止你不得不向HTML添加元素。