Four layers, from the inside out

Every element on a web page - a paragraph, a heading, a div, an image - is rendered as a rectangular box. That box is built from four layers, from the inside out: content (the text or image itself, sized by width and height), padding (space between the content and the border, which shares the box's background colour), border (a visible line with its own width, style and colour), and margin (transparent space outside the border that creates a gap between this box and whatever sits next to it). This is the box model, and it applies to every element you style.

Unless a page changes the default behaviour, width and height set the size of the content layer only. Padding and border are added outward from that content size, so a box's actual visible size on the page - what you would measure with a ruler on the screen, background colour and all - is content width plus left and right padding plus left and right border. Margin sits outside that visible box and is never part of it: it has no background, and increasing it never makes the box itself any bigger, only the gap around it.

Why this matters for calculations

Higher exam questions on the box model usually give you a content size plus padding and border values, and ask for the box's rendered size. Work outward one layer at a time rather than guessing: start from the content size, add padding on both sides, then add border on both sides. If margin is asked for separately, add it last, and be clear in your answer about whether you are describing the box itself or the total space it occupies including its margin - they are different numbers and exam mark schemes distinguish between them.

Four behaviours

The display property decides how an element behaves in the page layout. A block element (like a div, p or h1 by default) always starts on a new line and stretches to fill the available width, whether or not its content needs that much space. An inline element (like a or span by default) sits within a line of text, only takes up as much width as its content needs, and ignores any width or height you try to give it. inline-block is a middle ground: the element sits inline with its neighbours like an inline element, but still accepts width, height, and vertical padding and margin like a block element does. Setting display: none removes the element from the page entirely - it is not just invisible, it takes up no space at all, as if it were never in the HTML.

Pulling an element out of normal flow

By default, elements are laid out in normal flow: block elements stack top to bottom, and inline elements sit left to right within a line. float: left or float: right changes this for one element: it pulls that element as far as it can to the left or right of its container, and takes it out of normal flow. Everything that comes after a floated element in the HTML no longer treats it as a normal block in the way - other content moves up to sit alongside it, wrapping around it, instead of being pushed below it the way it would be for a normal block element.

This is exactly how a classic "text wraps around an image" layout works: float the image left, and the paragraph text that follows in the HTML flows up the right-hand side of it instead of starting underneath. Floating several block-level boxes the same direction, one after another in the HTML, is the classic (pre-modern-layout) way of getting boxes to sit in a horizontal row rather than stacking vertically.

What clear actually does

clear is applied to an element that comes after a floated element, not to the floated element itself and not to its parent container. clear: left stops that element sitting beside anything floated left; clear: right does the same for float right; clear: both covers either direction. A cleared element drops below the floated element instead of wrapping up next to it.

A separate problem: the collapsing container

Because a floated element is removed from normal flow, it stops contributing to its parent's height calculation. If a container's only children are floated, the container can collapse to almost zero height - its border and background shrink to a thin line, even though the floated boxes inside it are still clearly visible. This surprises pupils because it looks like a bug, but it is the box model behaving exactly as designed: the parent genuinely has no non-floated content to measure a height from. Applying clear to the parent itself does nothing here, because clear only affects an element's position relative to floats that came before it - it is not a tool for making a parent contain its floated children. The straightforward Higher-level fix is to give the collapsing parent overflow: hidden; (or overflow: auto;), which has the side effect of forcing it to expand around its floated content again.

Practical: live box model and float editor

Edit the CSS on the left and watch the preview on the right update instantly. Start by changing float: left to float: none on .box to see the boxes return to normal flow, then put it back and try deleting overflow: hidden; from .gallery to watch the container collapse.