<div class="wrapper1"> <div class="clearfix"> <div class="box1"> </div> <div class="box2"> </div> </div> <div class="box3"> </div> </div> <div class="wrapper1"> <div class="box1"> </div> <div class="box2"> </div> <p></p> <div class="box3"> </div> </div>
.wrapper1 { width: 500px; height: 200px; background: green; margin-top: 20px; } .clearfix:after { content: ""; display: block; clear: both; } .box1 { width: 100px; height: 100px; background: red; float: left; } .box2 { width: 100px; height: 100px; background: blue; float: left; } .box3 { width: 100px; height: 100px; background: yellow; } p { clear: both; }