html - 不使用容器清除 float

Question

我有以下网格:

http://jsfiddle.net/LPrwP/1/

<div class="container">
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
</div>

每篇文章向左浮动，宽度为 33%，如下所示:

[col][col][col]
[col][col][col]
[col][col][col]

但是，有时列的高度较大，会完全破坏 float ，呈现如下:

 [col][col][col]
 [col][col]
 [col]
 [col][col][col]

为了防止这种情况，我通常将每 3 个包装在 wrapper 中，如下所示:

[row][col][col][col][/row]
[row][col][col][col][/row]
[row][col][col][col][/row]

当内容获得列的高度不同时，这会阻止它中断。这是我想要效仿的解决方案。

但是，我不能每 3 个都换行，因为我还使用 AJAX(无限滚动)加载了更多帖子。如果列数不能被 3 整除，这可能会破坏它:

[row][col][col][col][/row]
[row][col][col][col][/row]
[row][col][/row] //this was left over

//loaded content
[row][col][col][col][/row]
[row][col][col][col][/row]

为了尝试解决这个问题，我将仅依靠 CSS 来解决这个问题。我正在尝试这个解决方案，但它不起作用:

.col33:nth-child(3n):after {
content: '.';
clear: both;
}

有谁知道如何只使用 CSS 而不清除容器来清除 float ？

Answer 1

我通常在每 3 个元素之后添加。我不认为只有 CSS 解决方案:

<div class="container">
    <article class="col33 h60"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33 h60"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33"></article>
    <article class="col33"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33"></article>
    <article class="col33 h60"></article>
    <article class="col33"></article>
    <div style="clear:both"></div>
    <article class="col33"></article>
</div>