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