Плавающий элемент, не включенный в родительский, вызывает проблемы на полях

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>

Div author и abbr делятся влево. Каждый из этих article div должен быть отделен от своих братьев и сестер примерно на 5 пикселей. Тем не менее, author div выходит за пределы технической "высоты" div. margin-bottom ничего не делает, поскольку пространство занято плавающим author.

Это несколько сложно представить, поэтому я поместил его на сервер .

Есть ли способ заставить родителя быть по крайней мере таким же высоким, как и все плавающие элементы в нем?

Если кто-нибудь поймет, что я говорю, спасибо.

Answer 1

В дополнение к вышеупомянутым хаки вы можете установить overflow:auto; на article div, хотя это может иметь побочные эффекты в зависимости от того, какие другие правила у вас есть для этих 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, которые очищают все плавающие элементы, плавающие влево и плавающие справа соответственно.