html - 将填充或边距应用于 float 内容的容器

Question

考虑以下 html 结构:

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="tagged">...</div>
    <div class="comments">...</div>
</div>

CSS 是:

.taggged { float: left; width: 50%; }
.comments { float: right; width: 50%; text-align: right; }
.entry { margin-bottom: 30px; }

问题是边距(或填充，如果适用)不会呈现在 .entry 元素的底部。我在 .entry 上尝试过 overflow: auto 和 clear:

的各种排列

Answer 1

我会试试

.entry { 溢出:隐藏；底部边距:30px； }

根据我的经验，另一件更好的事情是在源代码顺序中首先使用正确的 float 元素，如下所示:

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="comments">...</div>
    <div class="tagged">...</div>
</div>