A block formatting context contains floats
Floats are taken out of normal flow, so a normal parent ignores them and collapses to 0px. display: flow-root creates a BFC, which includes floats in its height.
The CSS questions interviewers ask most (specificity, the box model, Flexbox vs Grid, positioning and block formatting contexts) each have a short, precise model answer; learn the answer, the example that proves it, and the follow-up they usually ask next.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Order these selectors from weakest to strongest: ul li a, .menu a, #top a, :where(#top) a.link, a:hover.
A box has width: 300px; padding: 16px; border: 2px solid; margin: 10px; with default box-sizing. How wide is it on screen, and how much horizontal space does it take including margins? What changes with border-box?
Write CSS to place a close button in the top-right corner of a .modal, 8px from each edge.
Explain it without notes
How is CSS specificity calculated? Give examples, including :is(), :where() and inline styles.
Explain the CSS box model and the difference between content-box and border-box.
When would you use Flexbox and when Grid?
Explain the values of position and what the containing block is for each.
What is a block formatting context, how do you create one, and what problems does it solve?
Preview
Console
Nothing logged yet.Expected console output
normal parent height: 0px
flow-root parent height: 80px