clear

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.

Here, clear:left provides a clearance that is greater than the margin value, hence there is no gap between the boxes.

To create space between floats and surrounding boxes, it is better to apply margin on the floats themselves.

Style the pink box with margin-top:50%.

Style the pink box with margin-top:50%; position:absolute; (search for it).

Try These

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