floatの回り込みを解除する(clearfix編)
STEP.2
box1要素にfloat:leftを設定する
HTML
<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>
CSS
.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;
}