BOXを左右に振り分ける CSS

boxを左右に振り分ける。

右からやってみた。

@charset "UTF-8";

body{
margin: 0;
}
.box1, .box2, .box3,.box4{
border: solid 5px crimson;
box-sizing: border-box;
}

.boxA:after{
content: "";
display: block;
clear: both;
}

.box1{
background: lightpink;
width: 25%;
float:right;
}
.box2{
background: lightyellow;
width: 25%;
float: left;
}
.box3{
background: lightblue;
width: 25%;
float: right;
}
.box4{
background: lightgreen;
width: 25%;
float: left;
}