The collapsing parent and three ways to contain floats
Only the first box collapses to 0: its float hangs out below it. The clearfix, flow-root and overflow: auto boxes all grow to the 60px float. A floated <span> computes to display: block.
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
none height: 0
clearfix height: 60
flowroot height: 60
overflow height: 60
floated span display: block