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 last DIV clears all left floats inside the same block formatting context. The clearance of the pink box is set to the amount necessary to place the top border edge below the bottom outer edge of the aqua and yellow boxes.

See why clearance can be negative.

Inline elements do not clear floats.

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