This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats in other block formatting contexts. Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float.

The pink box drops below the two boxes because it cannot fit next to the previous floats.

If the aqua box was taller than the yellow one, then the left border edge of the pink box would touch the right edge of the aqua box. If the yellow one was taller, then the border top edge of the pink box would not be higher than the bottom edge of the yellow box.

Style the pink box with margin-left:50% (make sure to check in IE 6).

Try These

Watch This


Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).