我正试图为一个电子商务网站创建一个高效、简洁的布局。这个网站是为我的客户内部建立的，我只负责CSS和基本结构。
我想找出最好的结构方式来清除一行中的第三个方框。当所有的框都是相同大小时，它们会自然地漂浮在网格中，但是当其中一个框根据内容改变大小时（这在网站上很常见），这些框就会不正常地移动，并破坏布局。
我考虑了两个选项。
我可以手动放置一个div容器，在每第三个盒子后面加上 "清除 "样式。
我可以把箱子分成3组，然后使用Element:after在这个容器中放置一个clear，这样可以有效地清除这3个箱子。
这些方案中是否有一种比另一种更好？我知道 "clear "div并不可取，但创建一个新的容器来包裹3个盒子有那么好吗？无论哪种方式，我都是在页面上添加一个新的HTML元素。
是否还有其他我遗漏的选项？我知道可以动态地完成这两个选项中的任何一个，但我想确保在这个项目中选择更有效的选项。也就是说，我不用担心代码在功能上如何编写，我只需要弄清楚最终的结构是怎样的。
我对这种布局没有经验，我不知道是否可能有我还没有发现的东西，至于怎么做。
假设你的顶层包装盒有一个固定的宽度，你想在这个宽度中放置每行3个盒子，最好的解决方案是放置一个带有clear:both css样式的row-container div，如下面的代码。
<html>
<body>
<style>
#box_wrapper{
max-width:200px;
border: 2px blue solid;
}
.row_container{
clear:both;
border: 1px yellow solid;
}
.box{
width:50px;
height:50px;
float:left;
border: 1px red dotted;
}
</style>
<div id="box_wrapper" width="200" height="200">
<div class="row_container">
<div class="box" id="box_1"></div>
<div class="box" id="box_2"></div>
<div class="box" id="box_3"></div>
</div>
<div class="row_container">
<div class="box" id="box_4"></div>
<div class="box" id="box_5"></div>
<div class="box" id="box_6"></div>
</div>
<div class="row_container">
<div class="box" id="box_7"></div>
<div class="box" id="box_8"></div>
<div class="box" id="box_9"></div>
</div>
</div>
</body>
</html>
如果我没理解错的话，你是想让每第三件物品都有。clear: both;
让我们假设这些项目是div的。 所有这些项目都在 <div id="container"></div>.
现在，我会做以下工作。
#container div:nth-child(3n+1) {
clear: both;
}
你可以使用 :nth-child() CSS 伪类来实现。
更多信息在这里。https:/developer.mozilla.orgen-USdocsWebCSS:nth-child。
例子。
div:nth-child(3n) {
clear:right;
}
根据你需要提供的支持，你可以使用CSS3的nth-child选择器。
div:nth-child(3n) {
clear: right;
}
或者类似的东西，这取决于其他一切的设置。
你可以通过使用伪元素来实现这一点。:nth-child()
#element:nth-child(3n) {
clear:both;
}
哪儿 n 从0开始，该元素类型的每一个元素都以1为单位递增
下面就整体来看一下 :nth-child()http:/www.w3schools.comcssrefsel_nth-child.asp