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: