Float & Clear (Legacy Layout) (CSS Tutorial)

float was added to CSS for one simple job: letting text flow around an image, the way a newspaper or magazine wraps a column of text around a photo. For many years, though, CSS had no real layout tools, so developers stretched floats to build entire pages: sidebars, columns, galleries and navigation bars.

Today Flexbox and Grid do layout far better, and floats are back to their original job. You still need to understand them, because wrapping text around images is a real use, and because you will meet float layouts in older websites, themes and interview questions. This lesson covers both: the modern use first, then the legacy patterns.

What float does

float: left or float: right pushes an element to one side of its container. The text and inline content that follow then wrap around it.

A floated element is taken out of the normal flow in a special way. Block boxes that come after it act as if it is not there, but their lines of text make room for it. That is exactly the magazine effect.

HTMLTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float an image</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; color: #1f2937; }
    article { max-width: 36rem; line-height: 1.6; }
    .photo {
      float: inline-end;              /* right side in English pages */
      width: 9rem;
      height: auto;
      margin-block: 0.25rem 0.75rem;
      margin-inline-start: 1rem;      /* space on the side that faces the text */
      border-radius: 8px;
    }
    h2 { clear: both; margin-top: 1.5rem; }
  </style>
</head>
<body>
  <article>
    <h1>The old clock tower</h1>
    <img class="photo" src="https://course.ethicscomputer.in/assets/samples/portrait.svg" alt="Tall brick clock tower against the sky" width="400" height="600">
    <p>Every town seems to have one: a tall brick clock tower in the middle of the main market. For decades shopkeepers set their watches by it, and the bell told schoolchildren when to run for the morning assembly.</p>
    <p>Meera's grandfather remembers climbing the narrow stairs inside as a boy, when the caretaker let children watch the huge gears turn. The tower was repaired many times, but the bricks are still the original ones from the old kiln near the river.</p>
    <h2>Visiting today</h2>
    <p>The tower is open on Sunday mornings. Entry costs ₹20, and the view of the market from the top is worth every one of the hundred and twelve steps.</p>
  </article>
</body>
</html>

The image sits on the right and both paragraphs wrap around it. The margin keeps the text from touching the picture. The heading "Visiting today" has clear: both, so it starts below the image instead of next to it. Make the window wider and narrower to see the text reflow.

A few rules to know:

A floated element always becomes a block box, even if it was a <span> or <img>.
Give floated elements a width. Without one, a float shrinks to fit its content, which can be the whole container.
float: inline-start and float: inline-end follow the reading direction: in a right-to-left language such as Urdu, inline-start means right. These logical values work in current versions of all major browsers. See Logical Properties.

clear

clear says: "do not sit next to a float; move down below it". It takes left, right, both, inline-start, inline-end or none.

CSS

.section-heading {
  clear: both;   /* start below any float on either side */
}

Use it on a new section heading or a footer that must not wrap around an image from the previous section.

Floats can escape their container

Because floats are partly out of the flow, a container does not grow to hold them. If a card contains a floated image that is taller than its text, the image hangs out of the bottom of the card and overlaps whatever comes next. If all the children are floated, the container's height collapses to zero, and its background and border shrink to a thin line.

The modern fix is display: flow-root on the container. It creates a block formatting context: a self-contained box that fully contains its floats and stops margins from escaping through it. You met it briefly in Display & Visibility.

HTMLTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Containing floats</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; max-width: 30rem; }
    .card { background: #ecfdf5; border: 2px solid #059669; border-radius: 10px; padding: 0.75rem; margin-bottom: 2.5rem; }
    .card img { float: left; width: 6rem; height: auto; margin-right: 0.75rem; border-radius: 6px; }
    .card p { margin: 0; }
    .contained { display: flow-root; }
  </style>
</head>
<body>
  <div class="card">
    <img src="https://course.ethicscomputer.in/assets/samples/landscape-400.svg" alt="Hills and a river at sunrise" width="400" height="250">
    <p>Broken: the image hangs out of the card.</p>
  </div>
  <div class="card contained">
    <img src="https://course.ethicscomputer.in/assets/samples/landscape-400.svg" alt="Hills and a river at sunrise" width="400" height="250">
    <p>Fixed with <code>display: flow-root</code>.</p>
  </div>
</body>
</html>

The first card is only as tall as its single line of text, so the image spills out over its bottom border. Content placed right below that card would have to wrap around the stray image. The second card, with display: flow-root, grows to wrap the whole image.

Older code: clearfix and overflow

Before display: flow-root was supported (it now works in all current browsers), developers used two tricks. You will see both in older stylesheets:

CSS

/* The "clearfix" hack: an invisible element after the content clears the floats */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Or: overflow also creates a block formatting context */
.card { overflow: hidden; }

The clearfix works, but needs an extra class on every container. overflow: hidden also cuts off shadows, focus rings and dropdowns that stick out. Use display: flow-root in new code.

Legacy: float layouts

For about ten years, whole pages were built from floats. A two-column page looked like this:

CSS

/* Old float layout: do not copy this into new projects */
.row::after { content: ""; display: table; clear: both; }  /* clearfix on every row */
.sidebar { float: left;  width: 25%; padding: 1rem; box-sizing: border-box; }
.main    { float: right; width: 75%; padding: 1rem; box-sizing: border-box; }

Popular frameworks worked this way too: Bootstrap 3's grid was made of floated columns, and Bootstrap 4 switched to Flexbox. Float layouts had serious problems:

No equal-height columns. Each float is only as tall as its own content, so a sidebar background stopped half-way down. Developers faked it with tiled background images.
No vertical centring. Floats only move left or right.
Fragile widths. If padding, borders or rounding made the total slightly more than 100%, the last column dropped onto a new line.
Clearfix everywhere. Every row needed a fix, or the layout below it broke.
Visual order tied to HTML order, with odd tricks to change it.

The same layout in Grid is shorter, and every one of those problems disappears:

CSS

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;   /* sidebar and main, always equal height */
  gap: 1rem;
}

Use Flexbox for one-dimensional rows of things, such as navigation bars and button groups, and Grid for page layouts and galleries.

Floats inside Flexbox and Grid

float has no effect on flex items or grid items. If you turn a container into a flex or grid container, any float on its children is ignored. This is useful when updating old code: you can switch the parent to Grid, and the old float rules simply stop mattering, which also gives older browsers that lack Grid a working float fallback.

Beyond rectangles

Normally text wraps around a float's rectangular box. The shape-outside property lets text follow a circle or another shape instead, for a true magazine look. You will learn it in Clip-path, Shapes & Masks.

Common mistakes

Using floats for page layout in new code. Use Grid or Flexbox; keep floats for wrapping text around images.
Forgetting the margin on a floated image. The text touches the picture. Add a margin on the side that faces the text.
A floated image hanging out of its card. Add display: flow-root to the card.
Fixing escaped floats with overflow: hidden. It works, but clips shadows and dropdowns. Prefer flow-root.
Expecting float to work on flex or grid items. It is ignored there.

Key points

float moves an element to one side and lets text wrap around it; that is still a valid, modern use.
float: inline-start and inline-end follow the reading direction.
clear moves an element below earlier floats.
Floats do not stretch their container; display: flow-root makes the container wrap them.
Clearfix hacks and overflow: hidden are older ways to contain floats.
Float-based page layouts are legacy: use Flexbox and Grid, which also ignore float on their items.

Exercise

Write a short "About our school" article for a school in Rohtak. Float the landscape sample image to the start side with a width of 14rem, a margin facing the text and rounded corners, and let two paragraphs wrap around it. Put the article inside a bordered box that fully contains the image even when the text is short. Add a "Contact" heading that always starts below the image.

Show solution

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>About our school</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    .about {
      display: flow-root;
      max-width: 40rem;
      padding: 1rem;
      border: 2px solid #1d4ed8;
      border-radius: 12px;
      line-height: 1.6;
    }
    .about img {
      float: inline-start;
      width: 14rem;
      height: auto;
      margin-block: 0.25rem 0.5rem;
      margin-inline-end: 1rem;
      border-radius: 8px;
    }
    .about h2 { clear: both; }
  </style>
</head>
<body>
  <article class="about">
    <img src="https://course.ethicscomputer.in/assets/samples/landscape.svg" alt="Green hills and a river at sunrise" width="800" height="500">
    <p>Our school started in 1985 with two classrooms and forty students.</p>
    <p>Today we teach more than a thousand students from Class 1 to Class 12, with science labs, a library and a cricket ground.</p>
    <h2>Contact</h2>
    <p>Call the school office between 9 am and 3 pm.</p>
  </article>
</body>
</html>

display: flow-root makes the box wrap the floated image, and clear: both on the heading starts the contact section below the picture.

Quick Quiz

1. What was float originally designed for?

2. A card's floated image hangs out of the bottom of the card. What is the modern fix?

flow-root creates a block formatting context that fully contains floats.

3. What does clear: both do?

4. What happens to float: left on a child of a display: grid container?

Web Development

Programming Languages

Databases

Data Science & AI

Cloud & DevOps

Security & Systems

Office & Productivity

Float & Clear (Legacy Layout)