= CSS clearance
{c}
<CSS clearance> is the spacing introduced by the `clear` rules when a block's border edge must be placed below relevant earlier <CSS floats>. The calculation considers its hypothetical position and the floats to be cleared. It is a layout effect rather than a replacement for the block's declared margin.<Visual formatting model in CSS 2.2 by W3C>[§9.5.2, clearance and hypothetical top-border position]{ref}
For a simple horizontal-text example, take a left float whose bottom outer edge is at vertical coordinate $70$ <CSS pixels>. A following block would normally have its top border edge at coordinate $20$. With `clear: left` and zero vertical margins, the needed displacement is
$$
70-20=50
$$
pixels. If a relevant right float instead extends to $90$, `clear: both` requires the border edge to reach that lower boundary, giving $90-20=70$ pixels in the same simplified geometry.
The relevant edge includes the float's margin geometry; its content height alone is not always the correct reference. Clearing also concerns floats in the applicable <CSS block formatting context>, rather than every floated element anywhere in the document.
Margins make the general rule subtler. Introducing clearance inhibits the relevant <CSS margin collapsing>, so one cannot universally calculate it by adding an ordinary positive gap after all margins have already been collapsed. CSS2.2 explicitly permits zero or negative clearance. Its negative-clearance example separates previously collapsing margins and computes the correction needed for the final border-edge position.<Visual formatting model in CSS 2.2 by W3C>[§9.5.2, clearance algorithm and Example 2]{ref}
A useful layout check records the hypothetical border position, the relevant float bottom edges, margins and the context boundary. Changing `clear` then tests a specific float-separation requirement; changing arbitrary padding until the page looks right can conceal a different cause.
Back to article page
