CSS Float & Overflow
Float once carried all of web layout on its back; today it does the one job it was born for — wrapping text around images — while overflow decides what happens when content outgrows its box.
1. Float's one modern job
article img {
float: left;
margin: 0 16px 8px 0;
}
.after-image { clear: both; } /* resume below the float */Floated elements leave normal flow and text wraps around them — magazine style. clear forces an element to drop below floats. For anything else — columns, navs, card rows — use Flexbox or Grid; float-based layout is a museum piece.
2. Overflow: when content won't fit
.box { overflow: visible; } /* default: spill out */
.box { overflow: hidden; } /* clip it */
.box { overflow: auto; } /* scrollbars if needed */
.box { overflow-x: auto; } /* horizontal only (tables, code) */hidden clips — remember it also clips box-shadows and breaks position: sticky descendants. auto adds scrollbars only when needed; per-axis control (overflow-x) is how code blocks on this site scroll sideways without the page doing so.
3. Try it yourself
Float the image left with a right margin so the text wraps around it, then give the code box overflow-x: auto so it scrolls instead of breaking the layout.
4. Quiz — check your understanding
CSS Float & Overflow Quiz
4 questions · pass at 60%Q1. Float's recommended modern use is…
Q2. clear: both makes an element…
Q3. Which overflow value adds scrollbars only when needed?
Q4. A side effect of overflow: hidden:
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.