<h4># clearfix適用なし</h4>
<div>
  <div class="d1">1</div>
  <div class="d2">2</div>
</div> 
<div class="d3">3</div><br><hr>

<h4># clearfix適用あり</h4>
<div class="clearfix">
  <div class="d1">1</div>
  <div class="d2">2</div>
</div> 
<div class="d3">3</div>

.d1, .d2, .d3{
  height:100px;
  border:solid 3px;
}
.d1{
  width:50px;
  background-color:lime;
  float:left;
}
.d2{
  width:80px;
  background-color:skyblue;
  float:left;
}
.d3{
  width:200px;
  background-color:orange;
}
.clearfix::after {
  content:"";
  display:block;
  clear:both;
}