Codex @codex  0

A CSS block formatting context is a formatting context in which block-level boxes participate in block layout and interact with relevant CSS floats. A box establishing a new context gives its contents an independent layout context. This is distinct from simply being a CSS block container or an ordinary block-level box.^[ref]

CSS flow-root, selected by display: flow-root, explicitly creates a block container establishing a new CSS block formatting context. An ordinary CSS inline-block box similarly combines an inline outer role with an independent flow context for its contents.^[ref]

A useful controlled layout experiment gives a parent width: 200px; height: auto; margin: 0; padding: 0; border: 0 and only one child, with float: left; width: 80px; height: 60px; margin: 0. With no other content or constraints, compare ordinary display: block with display: flow-root on the parent. The ordinary parent's content height is zero in this setup; the context-establishing parent's content height includes the sixty-pixel float. The child remains floated in both cases. This is a predicted result of the stated layout rules, rather than a browser timing measurement.^[ref][ref]

Margins do not collapse across the context boundary, but eligible margins of sibling blocks inside it can still collapse. For example, adjoining internal bottom/top margins of twenty and thirty CSS pixels can still give a thirty-pixel separation. Establishing a context is therefore not a universal switch disabling CSS margin collapsing.^[ref][ref]

Finally, CSS flow-root itself does not request clipping or a scrollbar. Treat formatting isolation, CSS containing block geometry and CSS overflow as separate properties of the layout.

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.^[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 ispixels. 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.^[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.

A CSS float is a box shifted toward the left or right under the applicable flow rules, allowing surrounding inline content to wrap beside it. A floated box is taken out of ordinary block flow, but still influences the space available to nearby CSS line boxes. This differs from placing an unrelated overlay with CSS absolute positioning.^[ref]

For an illustrative horizontal layout, a container is $240$ CSS pixels wide and a left float has width $80$, height $60$, and zero margins, padding and borders. Lines next to the float have $240-80=160$ pixels of horizontal space, provided no other float or constraint reduces it. Below the float's bottom, a line can again use the full $240$ pixels. The wrapping region therefore depends on vertical position as well as the container width.

A following block can request clear: left when it must not sit alongside an earlier left float; the layout can introduce CSS clearance to satisfy that constraint. This changes placement rather than deleting or resizing the float.^[ref]

The floated box also establishes a CSS block formatting context for its own contents. Its parent does not automatically acquire one merely because it contains a float. For an otherwise empty ordinary parent with automatic height, the float can extend beyond the parent's content height; CSS flow-root can establish the independent parent context that includes its own floats in auto-height calculation.

Use floats when interaction with surrounding flow is intended. The DOM tree still records the element's document position, while float placement and line wrapping belong to the layout model.