Html CSS-每行三个容器

在我的网站上，每行有三个左浮动容器，宽度为33%，我想为新行的第一行提供clear属性：两者，因为共有12个容器

有没有更简单的方法来确定选择器？ 我的做法如下：

.container:nth-of-type(4), .container:nth-of-type(7), .container:nth-of-type(10) {
    clear: both;
}

我也尝试了一些“3n”的东西，但我没有为我工作

我知道它不起作用。。。但是有这样的事情吗

.container:nth-of-type(4,7,10) {
    clear: both;
}

还是有更好的方法？谢谢你的回答

.container{
宽度：计算（（100%-120px）/3）；/*由于填充而计算*/
填充：0px 20px；
高度：300px；
背景色：红色；
浮动：左；
显示：块；
}
.容器：子容器第n个（4），.容器：子容器第n个（7），.容器：子容器第n个（10）{
明确：两者皆有；
}

---

第n个类型的伪选择器的工作原理类似于代数方程。如果使用类型为（3n）的第n个元素，则它将针对第0、第3、第6等元素。您需要添加1，使其成为类型（3n+1）的第n个

.container{
宽度：计算（（100%-130px）/3）；/*由于填充而计算*/
填充：0px 20px；
高度：300px；
背景色：红色；
边框：1px纯黑；
浮动：左；
显示：块；
}
.容器：子容器的第n个（3n+1）{
明确：两者皆有；
}

尝试使用此代码

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

您可以使用类型（3n+4）的第n个
：n个
，但如果
清除：两个
，则选定的容器将是行中唯一的容器。使用
clear:left
代替。
4,7和10应该用3n+1i表示think@syno签出我的答案将解决您的问题您应该真正考虑转换为使用浮动以外的东西-它们不应该被需要现在我们有CSS3可能的指导使用css FlexBox-它的5个项目在那里的一行，您可以根据自己的使用情况对其进行修改谢谢！那很容易。