【CSS3】floatの回り込みを解除する（clearfix編）

<div class="clearfix">
  <div class="box1">1</div>
  <div class="box1">2</div>
  <div class="box1">3</div>
</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2">6</div>

.box1 {
  height:50px;
  width:50px;
  background-color:green;
  border:1px solid;
  box-sizing:border-box;
  float:left;
}
.box2 {
  height:50px;
  width:50px;
  background-color:skyblue;
  border:1px solid;
  box-sizing:border-box;
}
.clearfix::after {
  content:"";
  display:block;
  clear:both;
}