clear: none, left and both
With clear: none the block slides up to the top, under the floats (its text squeezes between them). clear: left moves it below the 40px left float; clear: both below the 80px right float too. The flow-root wrapper always grows to fit.
float pushes a box to the left or right edge of its container and lets text and inline content wrap around it; floats leave normal flow, so parents collapse unless you contain them with display: flow-root, and clear moves a box below earlier floats.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Float an <img class="avatar"> to the right of a paragraph, 100px wide, with a 12px gap between it and the text.
A .gallery contains only floated thumbnails and its border collapses. Fix it without clipping and without changing the thumbnails.
A .footer slides up beside a left-floated .sidebar. Make it start below the sidebar.
Explain it without notes
What does float do to a box and to the content after it?
Why does a parent containing only floats collapse, and what are the ways to fix it?
What does clear: both do?
What is a block formatting context, and how does display: flow-root relate to floats?
Preview
Console
Nothing logged yet.Expected console output
clear: none -> top 0 | wrap height 80
clear: left -> top 40 | wrap height 80
clear: both -> top 80 | wrap height 100