display sets two things: the outer type (block or inline), how the box joins its parent's layout, and the inner type (flow, flow-root, flex, grid, table), how its children are laid out. The two-keyword syntax, widely available since January 2026, makes this explicit:
| Single keyword | Two keywords | Children form a |
|---|---|---|
| block / inline | block flow / inline flow | Normal flow |
| flow-root / inline-block | block flow-root / inline flow-root | New block formatting context |
| flex / inline-flex | block flex / inline flex | Flex formatting context |
| grid / inline-grid | block grid / inline grid | Grid formatting context |
A block formatting context (BFC) is an isolated layout region: it contains its floats, keeps outside floats from intruding, and stops child margins collapsing through its edges. display: flow-root creates one with no side effects, replacing clearfix and overflow: hidden hacks. Floats, absolutely positioned boxes, inline-block, contain: layout, and flex or grid items start one too, which explains many "my margins stopped collapsing" surprises. display: contents removes an element's own box so its children join the grandparent's grid, but webstatus.dev still rates it Baseline limited, so test it with a screen reader.