Html 在不使用容器的情况下清除浮动

我得到了以下网格：

但是，有时柱的高度更大，会完全打断浮动，呈现如下效果：

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

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

[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而不清除容器来清除浮动吗？

我通常会在每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>

---

我认为您想要的解决方案是清除第n个子项的浮动

.col33:nth-child(3n+1) {
    clear: both;
}

告诉我这是否适合您。

解决方案 我可以使用

display:inline block

和

vertical align:top

来实现相同的效果，而不是使用浮动。以下是修复该问题的CSS：

.col33 {
    width: 33%;
    display: inline-block;
    float: none;
    padding: 15px;
    vertical-align: top;
    font-size: 0;
}

唯一不好的是它创建了不必要的空白，我将宽度减少到

33%

，而不是

33.3%

，并使父级的

字体大小为0
添加此css

.container {
width: 500px;
background-color: blue;
overflow: hidden;


}
.col33 {
width: 31%;
height: 40px;
background-color: red;
float: left;
margin-left: 1px;
margin-top: 3px;
margin-right: 1px;
}
.h60 {
height: 60px;
}
.col33:nth-child(3n+1){
background-color: orange;
clear: both;
}

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

这不是要求我将每3个包裹在一组/行中吗？谢谢，但这不是我想要的。我希望得到类似@user3774355的解决方案，但不必在每3列之后添加HTML。
.col33 {
    width: 33%;
    display: inline-block;
    float: none;
    padding: 15px;
    vertical-align: top;
    font-size: 0;
}

.container {
width: 500px;
background-color: blue;
overflow: hidden;


}
.col33 {
width: 31%;
height: 40px;
background-color: red;
float: left;
margin-left: 1px;
margin-top: 3px;
margin-right: 1px;
}
.h60 {
height: 60px;
}
.col33:nth-child(3n+1){
background-color: orange;
clear: both;
}

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