To compute the clearance of an element with the property clear being set, first the theoretical position of the element's top border edge has to be determined. This position is where it would have been if the element's clearproperty would have been set to none.

If the theoretical position of the border's edge does not appear past the relevant floats, then the clearance gets introduced and the margins collapse according to the margin collapsing rules.

The amount of clearance is then set to the greater of:

  • The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.
  • The amount necessary to place the top border edge of the block at its theoretical position.

In any other case, the clearance will be set to the amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.

If the property gets applied to a floated element, then another rule is added to the above mentioned:

  • The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes in case of clear: left, all earlier right-floating boxes in case of clear: right or both in case of clear: both.

 

›› go to examples ››