看到这种效果你第一想法是什么？会不会是子元素设置margin-right，在遍历的时候nth-child(3n)还要设置为0，看看利用上面知识我们可以怎样处理

<style>
.wrap2{
    width:320px;
    border:dashed 1px orange;
}

.wrap2 .inner{
  overflow:hidden;
  margin-right:-10px;
}

.wrap2 .item{
    float:left;
    width:100px;
    height:100px;
    margin:10px 10px 10px 0;
    background:blue;
}
</style>

<div class="wrap2">
    <div class="inner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
  </div>
</div>

我们没有设置nth-child(3n)的边距为0，而是通过负边距使父元素“变大”。

负边距是不是很有意思，不很了解的少年们学起来吧！

参考

CSS布局奇淫巧计之-强大的负边距

转自Samaritans

负边距在布局中的使用