Comparison
Block formatting contextvsMargin collapsing
Block formatting context
you added `overflow: hidden` to the parent and the floats inside it stopped escaping the bottom.
An independent layout region whose contents cannot interact with the layout outside it: floats are contained, margins do not collapse through it, and it does not overlap adjacent floats. It is created by side effects of other properties — `overflow` other than visible, `display: flow-root`, flex and grid containers, absolute positioning — which is why the fixes for float and margin bugs have always looked like unrelated magic. `display: flow-root` exists to create one on purpose, with no side effects.
Full entry →Margin collapsing
the child's top margin pushed the parent down instead of moving the child inside it.
Adjacent vertical margins between block boxes merging into one, taking the larger of the two rather than adding them. It also happens between a parent and its first or last child when nothing — padding, border, or a new formatting context — separates them, which is the version that produces the confusing bug. It does not happen in flex or grid layouts at all, which is why the problem quietly disappeared for most people.
Full entry →