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.

The CSS box model describes the content, padding, border and margin regions used to lay out generated boxes. These define a CSS content box, CSS padding box, CSS border box and CSS margin box respectively. A box's declared width must be interpreted together with the applicable sizing rules.^[ref]

For a simple horizontal box with content width $w$, left/right padding $p_l,p_r$, border widths $b_l,b_r$ and margins $m_l,m_r$, the total margin-box width isWith $w=100$, padding ten on each side, borders two on each side and margins ten on each side, the total is 144 CSS pixels. Its border box is 124 pixels wide.

CSS box-sizing changes which area a width declaration sizes. With the same padding and borders but box-sizing: border-box; width: 100px, the border box is 100 pixels and the content width is 76 pixels in this example. Margins are still outside that declared border-box size.^[ref]

The example assumes ordinary nonnegative fixed horizontal values. Vertical margins can participate in CSS margin collapsing, and an inline element split across lines can generate several fragments. The box model supplies the regions; the formatting context determines how particular boxes are generated and positioned.

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.

CSS flow-root is the flow-root display value that creates a block container establishing a new CSS block formatting context. It provides an explicit way to isolate the relevant flow-layout interactions without requesting clipping or scrollbars.^[ref]

A margin example makes the boundary visible. Suppose an ordinary block parent has zero margin, padding and border, automatic height, and one in-flow block child of height $20$ CSS pixels. The child has top margin $30$ and all other margins zero. Assume no other constraints or clearance. With ordinary display: block, the child's top margin can collapse through the parent's top; the parent's content height is $20$ in this setup. With display: flow-root, the margin does not collapse across that context boundary, so the parent includes the thirty-pixel top margin and twenty-pixel child, giving height $50$.^[ref][ref]

This does not disable every internal instance of CSS margin collapsing. Two eligible sibling blocks inside the new context can still combine adjoining margins of twenty and thirty pixels into thirty. The boundary separates contexts; it does not rewrite all spacing rules within one.

The modern display terminology also separates outer and inner roles. display: inline-block corresponds to an inline outer role with a flow-root inner role. Thus a CSS inline-block box can sit in a surrounding line while independently formatting its contents.^[ref]

Finally, CSS flow-root is distinct from overflow: hidden or overflow: clip. Those values concern CSS overflow, with their own clipping and scrolling behavior. Choose an independent flow context for its layout effect rather than treating all these declarations as interchangeable.

The CSS margin box is the box bounded by the outer margin edges, outside the border, padding and content regions. It describes the margin contribution around a generated box. Margins are not part of the CSS border box sized by box-sizing: border-box.^[ref]

For a simple box with border-box width 100 CSS pixels and left/right margins of ten pixels each, the margin-box width is 120 pixels. A declaration width: 100px does not automatically include those margins, even when border-box sizing is selected.

The margin area is also not a painted extension of the element's background. Visible background and border geometry should therefore not be used to infer that all surrounding layout space belongs to the same painted area. Auto and negative margins have their specified layout effects as well, so a margin is not restricted to a fixed positive gap.

Vertical relationships require particular care. Two adjoining margins can participate in CSS margin collapsing, where the resulting separation is not simply their sum. For instance, eligible adjoining positive margins of 20 and 30 pixels collapse to 30 pixels under the applicable rules, rather than yielding 50.^[ref]

A margin-box calculation is consequently meaningful only together with the formatting context and the directions being considered. The uncomplicated horizontal sum illustrates box geometry; it is not a substitute for the separate vertical collapsing rules.

CSS margin collapsing combines eligible adjoining vertical margins into one collapsed margin. In the horizontal text layout described by CSS 2.2, this can occur between ordinary in-flow block boxes and in specified parent-child or empty-block situations. It does not mean that every pair of nearby margins is added or collapsed.^[ref]

For two eligible sibling blocks, a first block's bottom margin of $20$ CSS pixels and the next block's top margin of $30$ give a collapsed margin of $30$, not $50$. Positive adjoining margins contribute their largest value.

Negative values make the rule more interesting. For a collapsing group with a positive margin of $30$ and a negative margin of $-12$, the result is $30-12=18$ pixels. With only $-8$ and $-12$, it is $-12$, not $-20$. More generally, take the largest positive value, or zero if none, and subtract the largest absolute negative value, or zero if none.^[ref]

Eligibility comes before arithmetic. Horizontal margins do not collapse under these rules, and margins of a CSS inline-block box do not collapse with surrounding boxes or its in-flow children. A parent's top border or padding can prevent the top parent-child collapse that would otherwise occur. Establishing a separate CSS block formatting context also changes the relevant parent-child relationships.^[ref]

A useful debugging example is a parent's first child's top margin apparently moving the whole group rather than creating an internal gap. Inspect whether those margins are adjoining before changing unrelated dimensions. The CSS margin box describes a box's margin geometry, while CSS margin collapsing specifies how eligible margins interact during layout.