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.

clear:left provides clearance for the aqua box, but not for the yellow one which is floated right.

clear:both would position the border top edge of the pink box no higher than the bottom edge of any previous float.

Style the pink box with:

	position: relative

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).