浮动元素不包括在父，引起下边距问题

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添加元素。