Usando float e clear

by Anderson Madeira

HTML

<div class="wrapper">
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='box'><span>BOX</span></div>
  <div class='after-box'><span>after box</span></div>
</div>

CSS

.box, .after-box {
  width: 80px;
  height: 80px;
  margin: 1em;
  background-color: #555;
  line-height: 80px;
  text-align: center;
}

.box { 
  float: left;
}

.after-box {
  clear: left; // Clear serve pra limpar o efeito do float Ă  esquerda
}

div span { 
  background-color: #fff;
  color: #333;
  padding: 5px;
  font-size: 0.8em;
}

.after-box {}