CSS Float and Clear

Wrap text around images with float, stop the wrapping with clear, fix collapsed parents with display flow-root, and know when to use flexbox instead.

Lesson 18 of 49Beginner15 min read

Look at a newspaper or magazine and you'll see photos with text flowing neatly around them. On the web, that effect comes from the float property. A floated element is pushed to the left or right side of its container, and the text and inline content that follow wrap around it.

Floats have an interesting history. Before flexbox and grid existed, developers used floats to build entire page layouts: columns, sidebars and navigation bars. That was always a workaround, and it came with odd problems such as parent boxes collapsing to zero height. Today you should use flexbox and grid for layouts, and keep float for what it was designed for: wrapping text around images and pull quotes.

You'll still meet floats in older code, in WordPress themes and in email templates, so it pays to understand them. In this lesson you'll learn float, clear, why floated children collapse their parent, the classic clearfix, and the modern fix, display: flow-root.

How float works

CSS
img.left { float: left; margin: 0 16px 8px 0; }
  • float: left moves the element to the left edge; float: right to the right edge. float: none is the default.
  • The text after it wraps around the floated element's side.
  • Add a margin on the side facing the text so words don't touch the image.
  • A floated element becomes block-level, so you can give it a width even if it's an inline element like a <span>.
  • A floated element without a width shrinks to fit its content.

clear: stopping the wrap

Sometimes you want an element to start below a float instead of beside it, such as the next heading in an article. That's what clear does:

ValueThe element moves below…
clear: leftany left floats before it
clear: rightany right floats before it
clear: bothall floats before it

clear: both is the one you'll use most often.

The collapsing parent problem

Floated elements are taken out of the normal flow for their parent's height. If a box contains only floats, the browser thinks it's empty and its height collapses to zero. Backgrounds and borders on the parent then disappear, and following content creeps up beside the floats.

There are two fixes:

CSS
/* modern fix: one line, no side effects */
.container { display: flow-root; }

/* the classic clearfix, still common in older code */
.clearfix::after { content: ""; display: table; clear: both; }

display: flow-root creates a new block formatting context, which simply means the box contains its floats. overflow: auto also works, but it can add unwanted scrollbars or clip shadows.

Shaping the wrap with shape-outside

Text usually wraps around a float's rectangular box. With shape-outside, text can follow a circle or other shape:

CSS
.avatar { float: left; width: 120px; height: 120px; border-radius: 50%; shape-outside: circle(50%); }

It's a nice touch for portraits, round logos and editorial designs, and it only affects floated elements.

CSS Float Syntax

Float and clear

.photo { float: right; width: 40%; margin: 0 0 1em 1em; }
.next-section { clear: both; }
.container { display: flow-root; }
.portrait { float: left; shape-outside: circle(50%); }

CSS Float Summary

  • float: left or float: right pushes an element to a side, and text wraps around it.
  • Add margin on the text side so words don't touch the floated element.
  • clear: both moves an element below any floats before it.
  • A parent with only floated children collapses; fix it with display: flow-root.
  • Use flexbox and grid for page layouts, and float for wrapping text.

CSS Float Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Wrapping text around an image

Change left to right on line 2 and run again.

article img {
  float: left;
  margin: 0 16px 8px 0;
  border-radius: 8px;
  max-width: 45%;
  height: auto;
}

article { font-family: sans-serif; line-height: 1.6; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The image moves to the left and the paragraph flows around it.
  2. Line 3Right and bottom margins keep text away from the photo.
  3. Line 5On narrow screens the image never takes more than 45% of the width.
Example 2

Fixing a collapsed parent with flow-root

The first box has only floated children, so its border and background collapse. The second uses display: flow-root.

.box {
  border: 3px solid #16a34a;
  background: #dcfce7;
  margin-bottom: 40px;
  padding: 4px;
}

.tag {
  float: left;
  padding: 10px 16px;
  margin: 4px;
  background: white;
  font: 600 14px sans-serif;
}

.fixed { display: flow-root; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 6The green box should surround the tags.
  2. Line 9Floated tags don't count towards the first box's height, so it shrinks to just its padding.
  3. Line 16flow-root makes the second box wrap its floats properly.
Example 3

Clearing before a new section

.pic {
  float: right;
  margin: 0 0 8px 12px;
  border-radius: 50%;
  shape-outside: circle(50%);
}

h3 {
  clear: both;
}

body { font-family: sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The round photo floats to the right.
  2. Line 5Text follows the circle instead of the square box.
  3. Line 9The heading moves below the float instead of squeezing beside it.

Common CSS Float Mistakes

Using floats for a page layout

Don't
.sidebar { float: left; width: 30%; }
.main { float: left; width: 70%; }
Do
.page { display: grid; grid-template-columns: 30% 1fr; gap: 24px; }

Grid gives you gaps, equal heights and no clearing problems.

Forgetting margin on the text side

Don't
img { float: left; }
Do
img { float: left; margin-right: 16px; margin-bottom: 8px; }

Without a margin, text touches the image edge and is hard to read.

Adding empty clearing divs

Don't
/* <div style="clear: both"></div> added after every float group */
Do
.container { display: flow-root; }

Empty markup just for layout is old practice. flow-root fixes the parent without extra HTML.

CSS Float in Real Projects

Where floats still appear

News sites and blogs float images and pull quotes inside articles. WordPress's alignleft and alignright classes are floats. HTML emails still lean on floats and tables because many email apps have limited CSS support. When you work on older codebases, such as Bootstrap 3 sites, you'll see .clearfix and .pull-right classes everywhere.

CSS Float Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Float the photo to the right.

.photo {
  : right;
}
Multiple choiceeasy

What happens to text after a floated image?

Multiple choicemedium

Which property makes a heading start below earlier floats?

Multiple choicemedium

A container holds only floated boxes and its background has vanished. What's the modern fix?

Fix the bugmedium

The gallery's grey background has collapsed because its images are floated, and the caption sits beside the images instead of below. Fix both.

.gallery { background: #e5e7eb; padding: 6px; }
.thumb { float: left; width: 80px; height: 80px; margin: 4px; background: #60a5fa; }
.caption { clear: none; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Gallery wraps its floats
  • Caption clears floats
  • Thumbs are still floated

CSS Float Quiz

5 questions to check what you learned.

  1. What is float mainly used for today?

    • Whole page layouts
    • Centring elements
    • Wrapping text around images and quotes
    • Animations

  2. What does clear: left do?

    • Moves the element below any left floats before it
    • Removes the element
    • Floats the element left
    • Clears its text

  3. Why does a parent with only floated children collapse?

    • Floats are invisible
    • Parents can't have backgrounds
    • The browser has a bug
    • Floats are taken out of the normal flow for the parent's height

  4. What does the classic clearfix use?

    • An extra span
    • JavaScript
    • A negative margin
    • An ::after pseudo-element with clear: both

  5. What does shape-outside: circle(50%) change?

    • The image becomes round
    • Text wraps around a circle instead of the float's rectangle
    • The float moves to the centre
    • It clears the float

CSS Float Challenge

A magazine-style article

  1. Float .quote to the right with a width of 40%
  2. Give .quote a margin-left of 16px
  3. Make .article contain its floats with display: flow-root
  4. Make .footer clear all floats
.article { width: 500px; font-family: sans-serif; background: #fefce8; }
.quote { margin: 0; padding: 12px; background: #fde68a; font-style: italic; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Quote floats right
  • Quote is 40% wide
  • Quote has a left margin
  • Article contains its floats
  • Footer clears floats

Related CSS topics

16DisplayControl how a box behaves: block, inline, inline-block, none, flex, grid.19FlexboxLine things up in rows or columns, space them out and centre anything.29Images & FiltersSize and crop images with object-fit and object-position, round them, add filters such as grayscale and blur, build hover effects and image overlays.
Esc
↑↓ to navigateEnter to open