CSS是前端開發中必不可少的一項技術，在網頁排版和樣式設計中有著非常重要的作用。而在實際的開發中，我們經常需要將多個盒子按照一定的規則排列。本篇文章就介紹一下如何使用CSS來實現每排三個盒子的效果。

.box{
width: 33.33%; /*每個盒子寬度為容器的1/3*/
float: left; /*浮動，使盒子并排顯示*/
box-sizing: border-box; /*防止邊框和內邊距影響元素的尺寸*/
padding: 10px; /*盒子內部的填充*/
}
.clearfix::after{ /*清除浮動*/
content: "";
display: block;
clear: both;
}

在上述代碼中，我們定義了一個名為.box的樣式，其中設置了盒子的寬度為容器寬度的1/3，并將其浮動到左側。同時，為了避免盒子的邊框和內邊距影響盒子的實際尺寸，我們將其盒模型設置為border-box，并為盒子設置了padding值，以便更好地控制其內部布局。最后，為了避免因浮動而引發的布局問題，我們使用clearfix技巧來清除浮動。

接下來讓我們看一下實際應用的例子。

<div class="container clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在這個示例中，我們定義了一個名為container的容器，并聲明了clearfix樣式。然后，我們在容器中添加了九個盒子，它們的樣式均為.box。如此一來，我們就可以實現每排三個盒子的效果了。

以上就是使用CSS實現每排三個盒子的方法及實際應用的例子了。希望這篇文章可以幫助大家更好地掌握CSS布局技巧。