Floated elements go to the left or right until they reach the boundaries of their parent or another floated element.

<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
float: left;
}
.blue { background: #44accf; }
.green { background: #b7d84b; }
.orange { background: #e2a741; }
.pink { background: #ee3e64; }
</style>
</head>
<body><div class="blue box"></div><div class="green box"></div><div class="blue box"></div><div class="green box"></div></body>
</html>
]]>

Psst: background is a shorthand property that allows us to set many background-related properties in a single declaration.

While none is a possible value, it's also the default value and means the image doesn't float. Is that really what we want?