negative clearance

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.

This is an example of negative clearance. Without the 'clear', the first and last DIVs' margins would collapse and the last DIV's top border edge would be flush with the top of the floating DIV. But the 'clear' requires the top border edge to be below the float, i.e., 60px lower. That means that the margins must not collapse and clearance must be added such that clearance + 'margin-top' = 60px, i.e., clearance = 60px - 'margin-top' = 60px - 90px = -30px.

Watch This

aqua
yellow
pink

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