PHASE 6Intermediate ~27 min· topic 4 of 5

Topic 6.4

Floats and Clearing

In one line

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.

Think of it like this

A big rock in a stream. The rock sits against one bank, and the water flows around it, then fills the full width again once it's past. A float is the rock: pushed to the left or right side of its container, while lines of text flow around it like water.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Float: A box pushed to the left or right of its container, with text wrapping around it.
Wrap: When lines of text flow around something instead of under or over it.
Blockify: To make a box behave like a block. Floating a <span> makes it a block.
Collapsing parent: A parent containing only floats has no in-flow content, so its height becomes 0.
`clear`: A property that moves a box down below earlier floats on the left, right or both sides.
Clearfix: An old trick: an empty ::after box with clear: both at the end of a parent so it contains its floats.
Block formatting context (BFC): An independent layout area. It contains its floats, and margins don't collapse through it.
`display: flow-root`: The modern, side-effect-free way to make an element a BFC, so it contains its floats.
`shape-outside`: A property for floats that makes text wrap along a shape, like a circle, instead of a rectangle.

Step by step

01Float an image

Put an image at the start of a paragraph and float it left. The image moves to the left edge and the text runs down its right side, then back to the full width below it. A margin on the float keeps the text from touching it.

style.csswhole filecss

.article img {
  float: left;
  width: 120px;
  margin: 0 12px 8px 0; /* right and bottom gap for the text */
}

02Watch the parent collapse

Put two floated boxes inside a bordered <div> and nothing else. The border shrinks to a line at the top and the boxes hang out underneath. The parent has no in-flow content, so its auto height is zero.

index.htmlwhole filehtml

<div class="row">  <!-- height: 0 -->
  <div class="col" style="float: left">One</div>
  <div class="col" style="float: left">Two</div>
</div>

03Contain the floats

Add display: flow-root to the parent. It becomes a block formatting context and grows to wrap the floats. In code you didn't write, you'll often see the clearfix or overflow: hidden used for the same job.

style.csswhole filecss

/* modern */
.row { display: flow-root; }

/* older code: the clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

04Clear to start below

A footer after a floated sidebar slides up next to it. clear: both pushes the footer's top edge below the bottom of every earlier float, on either side.

style.csswhole filecss

.footer {
  clear: both;
}

Clear to start belowdiagram

Rendering diagram…

05Know when not to float

To put cards in a row or build columns, use Flexbox (Phase 7) or Grid (Phase 8): they align, stretch and wrap properly and contain their children. Keep floats for wrapping text around something.

Try it yourself

1
Stop the wrap
In the first example, add display: flow-root to the first <p>. Predict how the text behaves. (The paragraph becomes a BFC, so it sits beside the image as a narrower column and never wraps under it: a media object.)
2
Break the clearfix
In the second example, delete content: ""; from the clearfix rule. Predict the clearfix line in the console. (Height 0: without content, the ::after box isn't generated at all.)
3
Float more than fits
In the third example, change .after to also be float: left with width: 150px. Predict where it goes. (It doesn't fit between the two floats in 260px, 70 + 70 + 150 > 260, so it drops below the left float and tucks in beside the taller right one.)

Code & diagrams

Text wraps around a floated image New tab

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.

Preview

Press Run to see the page.

Console

Nothing logged yet.

The collapsing parent and three ways to contain floats New tab

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`.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

none height: 0
clearfix height: 60
flowroot height: 60
overflow height: 60
floated span display: block

clear: none, left and both New tab

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.

Preview

Press Run to see the page.

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

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

A background that disappears

Float three cards left inside a <section class="cards"> that has background: #eee; padding: 0;, with nothing else inside it.

terminal

$ the page shows

── what you'll see ──

The grey background is gone, the cards sit on the page's white background, and the next section's text wraps up beside the cards.

Break #2

Using overflow: hidden to contain floats

Contain a float with overflow: hidden on a card that also has a dropdown menu or a box-shadow on a child.

terminal

$ the page shows

── what you'll see ──

The floats are contained, but the dropdown is cut off at the card's edge and the child's shadow is clipped.

Myth vs fact

Myth

Floats are obsolete and should never be used.

Fact

Floats are obsolete for page layout, but they are still the only way to wrap text around an image or quote, and shape-outside only works with floats.

Myth

clear goes on the floated element.

Fact

clear goes on the element that should start below the floats. On a float itself it means "don't sit beside earlier floats", which is rarely what you want.

Myth

overflow: hidden is the right way to contain floats.

Fact

It works only because it creates a BFC, and it clips content as a side effect. display: flow-root was added to do exactly this job without side effects.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Floats never cover the text of later content: line boxes are shortened around them, while block backgrounds and borders still run under the float. That's why a bordered paragraph next to a float shows its border behind the image.
▸
Margins of floated boxes never collapse with other margins, and a float's margin box is what text wraps around. Adding shape-margin pushes text away from a shape-outside shape.
▸
float is ignored on absolutely and fixed positioned boxes (their computed float is none) and on flex and grid items. Setting display: flex on a parent is a quick way to cancel old floats in legacy code.
▸
float: inline-start and inline-end (logical floats) have been supported in all major browsers since 2023, so a float can follow the text direction in right-to-left pages.

Remember this

1
float: left or float: right takes a box out of normal flow and moves it as far left or right as it can go within its containing block, starting at the line where it appeared. Block boxes after it act as if it isn't there (they slide up underneath it), but their line boxes get shorter so the text wraps around the float. That's the one job floats are still the best tool for: wrapping text around an image or a pull quote, like in a magazine. float: none is the default; float: inline-start and inline-end are the logical versions.
2
Floating a box blockifies it: a floated <span> or <img> behaves like a block, so width, height and vertical margins work. A floated box with width: auto shrinks to fit its content. Floats placed one after another line up side by side, and wrap to the next row when they don't fit. Before Flexbox existed (around 2015), whole page layouts with sidebars and columns were built this way, which is why you'll still find floats in older code.
3
Because floats are out of flow, a parent that contains only floats has nothing in flow to measure, so its height collapses to zero: its background and border shrink to a thin line above the floats, and the floats hang out of the bottom. This is called float containment, or the "collapsing parent" problem.
4
The clear property makes a box move below earlier floats instead of sliding up beside them. clear: left clears left floats, clear: right clears right floats, and clear: both clears both. The old fix for the collapsing parent, the clearfix, adds an empty generated box at the end of the parent that clears the floats: .clearfix::after { content: ""; display: block; clear: both; }. The parent now has something in flow below the floats, so it grows to contain them.
5
The modern fix is display: flow-root on the parent. It creates a new block formatting context (BFC): an independent layout area that always grows to contain its floats, and also stops its children's margins from collapsing through it. overflow: auto or hidden also creates a BFC (the older trick), but it can clip shadows and dropdowns or add scrollbars, so flow-root is better. Flex and grid containers contain their children too, and float is ignored on flex and grid items.
6
A BFC box placed next to a float doesn't slide under it either: it becomes narrower and sits beside the float. That gives a simple "media object" (image left, text block right, text never wrapping under the image). shape-outside (with a floated element) lets text wrap along a circle or an image's outline instead of the float's rectangle, for magazine-style layouts.

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?

Practice

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.

Trade-offs

↔
Floats give natural text wrap that no other layout tool can, but they are fragile for layout: rows of floats don't align heights, need containment and break when content is taller than expected. Use Flexbox or Grid for rows and columns.
↔
The clearfix works in every browser ever made and needs no change to display, but it adds a pseudo-element and a class to remember; flow-root is one clear declaration and is supported in every modern browser.

Done when you can

I can float an image and make text wrap around it with a gap.
I can explain why a parent with only floats collapses.
I can contain floats with display: flow-root and recognise the clearfix.
I can use clear to start a box below floats.
I know when to use Flexbox or Grid instead of floats.

Command Palette

Words you'll meet

Step by step

01Float an image

02Watch the parent collapse

03Contain the floats

04Clear to start below

05Know when not to float

Try it yourself

Stop the wrap

Break the clearfix

Float more than fits

Code & diagrams

Break it on purpose

A background that disappears

Using overflow: hidden to contain floats

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can