overflow takes five values that decide whether content bigger than its box spills out, gets clipped, or scrolls.
visible, the default, lets content spill outside the box.
hidden clips content at the padding edge with no scrollbars, though script can still scroll it.
scroll clips and always shows scrollbars, even when nothing overflows.
auto clips and shows scrollbars only when content overflows.
clip clips like hidden but allows no scrolling at all, even from script.
Every value except visible and clip creates a new block formatting context. So overflow: hidden contains floats and stops margin collapsing with children, while clip does neither.
overflow is shorthand for overflow-x and overflow-y, so overflow: hidden auto sets each axis on its own.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
