Page floats

css-page-floats extends float past the inline left/right edges to the page itself. float: top below pins this figure to the true top edge of whichever page its source position lands on - ordinary flow content, including this paragraph, starts below the reserved strip rather than overlapping it.

float: top - pinned to this page's top edge, not to where it appears in the source order.

Because the reservation is dynamic (the same mechanism float: footnote already uses for its note area), the figure's own height is measured once and fed back in, so the flow content below it always starts exactly where the figure ends.

float: bottom - pinned to this page's bottom edge. Flow content above stops short of the reserved strip instead of running into it.

top-bottom: falls back once the top has no room

float: top-bottom tries the top edge first; once an earlier float has already claimed the room there, a later one falls back to the bottom edge instead:

float: top - a tall figure that claims most of the page's top-reservable room.
float: top-bottom - with no room left at the top, this one lands at the bottom edge instead.

The two floats above never overlap: the second one's own height was measured, found not to fit in what remained at the top, and reserved from the bottom edge instead.

inside / outside on a right-hand (recto) page

This is an odd-numbered page - the same "recto" side @page :right selects. inside floats to the edge nearest the spine (left, here); outside floats to the far edge (right):

float: inside - nearest the spine on this recto page.
float: outside - the far edge on this recto page.

Turning the page flips which physical side each one resolves to, since both are relative to the binding rather than a fixed left or right.

inside / outside on a left-hand (verso) page

This is an even-numbered page - inside and outside now resolve to the opposite physical sides from the recto page before it:

float: inside - now on the right, nearest the spine on this verso page.
float: outside - now on the left, the far edge on this verso page.

float-reference: column

Inside a two-column container a page float can name the column instead of the page. Only the column holding the float gives up room: the left column below keeps its full height and starts at the top of the band, while the right column starts under its own float-reference: column figure.

float: bottom, float-reference: column - flush with the foot of the left column, which stops above it.

Column one. This paragraph is anchored in the left column, so the callout belongs to that column and to no other: its strip is reserved at the left column's foot and the right column is unaffected by it.

The left column keeps flowing down to the callout. Every line up to the callout is in the left column's own band.

More left-column text, so that the flow reaches the right column: the container balances its columns, and the room each float takes is part of the balance.

Still the left column, until the balance moves the flow across.

float: top, float-reference: column - pinned to the top of the right column, whose text starts below it.

Right column. This paragraph follows the second float in the source, so it is anchored in the right column and the figure sits at that column's top edge, not the page's.

Right column. The left column beside it began at the top of the band and is untouched by this float.

Right column. A little more text so that the two columns are of a similar length.