SOURCE

<h5>
  第1种方法
</h5>
<div class="box div1 clearfix">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
<h5>
  第2种方法
</h5>
<div class="box div2 ">
  <div class="wrap clearfix">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>
<h5>
  第3种方法
</h5>
<div class="div3">
  <div class="wrap">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>
s
<div class="box div4 clearfix">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

* {
  margin: 0;
  padding: 0
}

.clearfix {
  zoom: 1
}

.clearfix::after {
  content: "";
  clear: both;
  display: block;
  height: 0
}

.box {
  background: yellow;
  width: 415px;
  box-sizing: border-box;
}

.box .item {
  border: 1px solid red;
  margin-right: 5px;
  margin-bottom: 5px;
  height: 30px;
  width: 100px;
  float: left;
  box-sizing: border-box;
}

.div1 .item:nth-of-type(4n) {
  margin-right: 0
}
.div2{
  overflow:hidden
}
.div2 .wrap{
  background-color:yellowgreen;
  margin-right:-5px;
}

.div3{
  background: yellow;
  width: 415px;
  box-sizing: border-box;
  
}
.div3 .wrap{
  display:flex;
  flex-wrap: wrap;
  margin-right:-5px;
}
.div3 .item{
  border: 1px solid red;
  margin-right: 5px;
  margin-bottom: 5px;
  height: 30px;
  width: calc(25% - 5px);
  box-sizing: border-box
}

.div4 .item{
  width:calc(25% - 5px)
}