In CSS, why does a container whose children are all floated collapse to zero height, and what makes it contain them again?

## The symptom You write a row of floated columns, put a border on the wrapper, and the border draws as a thin line across the top while the columns hang out below it: ```css .row { border: 1px solid #333; } .col { float: left; width: 33.333%; } ``` Nothing is broken. This is the specified behaviour of auto height plus floats, and it is the single most-asked float question because every legacy stylesheet carries a workaround for it. ## Why the height ignores floats A float is *out of flow*. When a block-level box with `height: auto` sizes itself, it measures the distance from its top content edge to the bottom edge of its last **in-flow** child (or its last line box). Out-of-flow boxes — floats and absolutely positioned boxes — are simply not in that measurement. If every child is floated, the container has zero in-flow content, so its content height is zero. There is one exception, and it is the whole answer to the question: a box that establishes a **block formatting context** computes its auto height so that it also includes the bottom edge of the lowest float it contains. "Contains" is the operative word — floats are laid out inside the nearest formatting-context root, so a container that is a root both owns its floats and measures them. ## Fix 1: display: flow-root `display: flow-root` exists for exactly this job. The outer display stays block, so the element still lays out as a block in its parent; the inner display becomes an independent flow root, so it contains its floats and its auto height grows to fit them. ```css .row { display: flow-root; } ``` No pseudo-element, no clipping, no scrollbars, no extra markup. It also stops margins from collapsing through the box, which is a bonus rather than the point here. It is supported in every current browser — Chrome and Firefox from 2017, Safari from version 13 in 2019 — so on any modern baseline it is the default answer. ## Fix 2: overflow (the accidental one) `overflow: hidden`, `auto`, or `scroll` on the container also makes it a formatting-context root, so it contains floats as a **side effect**. This was the popular one-line fix for years, and it is still what you will find in old code. Its cost is that overflow is a real, load-bearing property: `hidden` clips any child that deliberately escapes the box (tooltips, drop shadows, absolutely positioned menus), and `auto` can produce a scrollbar you never asked for. It can also defeat a descendant that relies on scrolling from an ancestor. Prefer `flow-root` unless you actually wanted the clipping. ## Fix 3: the clearfix The historical workaround does not create a formatting context at all. It manufactures an in-flow child that sits *below* the floats: ```css .row::after { content: ""; display: block; clear: both; } ``` The generated box is in flow, `clear: both` pushes its top edge below the bottom margin edge of the preceding floats, and because it is the last in-flow child, the parent's auto height now reaches it. Older variants used `display: table` on `::before` and `::after` to also stop margins collapsing through; even older code used a literal empty `<div>` with `clear: both`, which is presentational markup and the reason the pseudo-element version won. A clearfix still works, and you should be able to read one, but it is boilerplate that `flow-root` replaced with a single declaration. ## Fix 4: change the layout model `float` does not apply to flex or grid items — it computes to have no effect on them. So turning the container into `display: flex` or `display: grid` makes the whole problem evaporate, because the children stop being floats and become items that the container sizes itself around. On a modern codebase this is usually the real fix: the floats were only ever there to put boxes side by side. ## What does *not* fix it - Putting `clear: both` on the floats themselves. Clearance moves a box down relative to earlier floats; it does not put it back in flow, so the parent still cannot measure it. - `position: relative` on the container. That creates a containing block for positioned descendants and has nothing to do with float containment. - Setting a fixed `height` on the container. That hides the symptom at one viewport width and breaks at every other one. ## What to say in an interview Name the rule (auto height counts in-flow children only), name the exception (a formatting-context root contains and measures its floats), then rank the fixes: `flow-root` first, `overflow` as the legacy accident with clipping costs, clearfix as the pseudo-element that adds a cleared in-flow child, and "stop using floats for layout" as the real answer in new code.