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

除了上述黑客之外，您还可以在overflow:auto; div上设置article，但这可能会产生副作用，具体取决于您对这些div的其他规则。但它会阻止您向HTML添加元素。

Answer 2

你可以将它放在div.article的底部/内部（在关闭div之前）

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

或者这样做：

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

Answer 3

您需要在浮动元素后添加清除元素。这样的东西通常有效<br clear="both"/>，它将清除左右浮动并“填充”你的包含元素。

您可以指定both，left和right清除所有浮动元素，相应地左浮动和右浮动。

浮动元素不包括在父级中，导致边缘问题

3 个答案: