Learn CSS Layout
The clear property is important for controlling the behavior of floats. Compare these two examples:
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
I feel like I'm floating!
</div>
In this case, the section element is actually after the div. However, since the div is floated to the left, this is what happens: the text in the section is floated around the div and the section surrounds the whole thing. What if we wanted the section to actually appear after the floated element?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
I feel like I'm floating!
</div>
Using clear we have now moved this section down below the floated div. You use the value left to clear elements floated to the left. You can also clear right and both.
