Text wraps around a floated image
Change float: left to float: right, then remove shape-outside and look at how the text hugs the image's square corner instead of the circle.
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.