In CSS normal flow, which conditions stop vertical margins from collapsing, and which of those would you choose to keep a child's margin inside its parent?

## Two separate reasons a collapse does not happen It helps to split the list in half rather than memorise nine bullet points. **Reason one: the margins are not adjoining.** Two margins collapse only when nothing sits between the border edges they belong to. So a collapse is broken by: - `padding` on the side in question, - a `border` on that side (even `border-top: 1px solid transparent`), - intervening content that generates a line box, - clearance introduced by `clear` on a box following a float, - for the parent/last-child pair, a resolved non-auto `height` or a non-zero `min-height` on the parent. **Reason two: the box opts out of block-flow collapsing entirely.** - **Floats.** A floated box's margins never collapse with anything. - **Absolutely positioned boxes.** `position: absolute` and `fixed` remove the box from flow and from collapsing. - **Flex and grid items.** The specifications state outright that the margins of flex items and of grid items do not collapse. - **The root element.** Its margins never collapse. - **Block formatting context roots.** A box that establishes a BFC does not collapse its margins with its **in-flow children**. ## The BFC clause is the one people misquote "Establishing a formatting context stops margin collapsing" is only half true, and the missing half is where interview answers fall apart. It stops the box collapsing **with its own children**. It does not stop that box's margins collapsing with its **siblings'** margins. Putting `overflow: hidden` on box A to stop A's bottom margin merging with B's top margin does nothing at all; putting it on A to stop A's *child's* top margin escaping works perfectly. ## Choosing a fix When a child margin is escaping a container, all of these work, but they cost different things: - **`display: flow-root`** — establishes a block formatting context and does nothing else: no size change, no clipping, no effect on how children lay out. This is the fix the property was added for, and it is the default choice. - **`padding-top: 1px`** or a transparent border — separates the margins, but changes the box's metrics and reads as a hack. - **`overflow: hidden` / `auto` / `scroll`** — establishes a BFC as a side effect of making a scroll container. That container clips overflow, which silently breaks box shadows, focus rings and any absolutely positioned menu that needs to escape, and it becomes the scroll container that a `position: sticky` descendant sticks within. Use it when you actually want clipping. - **`display: flex` / `grid`** — reliable, since items never collapse, but it re-lays-out every child to buy one behaviour. - **`overflow: clip`** — a trap. `clip` is the one overflow value that does **not** establish a block formatting context, so it clips without stopping the collapse. ## The structural alternative A fix applied per container is a fix you will apply forever. Two conventions remove the problem class instead: ```css /* container owns the spacing */ .stack { display: flex; flex-direction: column; gap: 1rem; } ``` or a single-direction margin convention, where components only ever declare margin on one block side, so two adjoining margins are never both non-zero and the collapse result is unambiguous either way. Both are cheaper than teaching every contributor the collapsing rules. ## What an interviewer is listening for Not the list. They want to hear that you know *why* each entry is on it — separation versus opting out of block flow — that you keep the BFC clause scoped to children, and that you pick a fix by its side effects rather than reaching for `overflow: hidden` by reflex.