Question

I know that the clear: both property is used to clear floated elements. What about clear: left and clear: right? How and when do I use them?

Answer 1

Those values tell a box to clear only left floats or only right floats respectively. Instead of stacking horizontally to either a left float’s right, or a right float’s left, it will stack beneath the float respectively.

If you have a series of left and right floated elements, clear: left clears a box only from previous boxes that were floated left, and clear: right clears it only from previous boxes that were floated right.

If the boxes before a clear: left box are floated right, the box itself will float right as well, as it has not cleared the right floats. Likewise when a clear: right follows boxes that are only floated to the left, the box itself will float left as well.

Some visual explanations:

• SitePoint Reference
• W3C CSS2.1 specification