CSS Float and Clear: The Old Layout Method Explained

CSS float lets text wrap around an image, like in a magazine. Learn how float and clear work, how to fix collapsed parents, and why layouts now use Flexbox and Grid.

What was CSS float made for?

The float property pushes an element to the left or right side of its container, and lets the text that follows flow around it. Think of a photo in a newspaper article: the photo sits on one side, and the words wrap around it. That is exactly what float was designed for.

<article class="post">
  <img class="post-photo" src="https://picsum.photos/200/150" alt="A mountain lake at sunrise">
  <p>Last summer we walked for three days in the mountains. Every morning the lake was calm and silver, and the air was cold and fresh. We cooked breakfast on a small stove and watched the sun climb over the hills. It was the most peaceful trip of our lives, and we can't wait to go back next year with more friends.</p>
</article>

.post {
  max-width: 600px;
  font-family: Georgia, serif;
  line-height: 1.6;
}

.post-photo {
  float: left;
  margin: 0 16px 8px 0;
  border-radius: 8px;
}

The photo moves to the left, and the paragraph wraps around its right side and then continues underneath it. The margin keeps the text from touching the image. Use float: right to put the image on the other side, and float: none to cancel a float.

How does clear work?

Sometimes you want an element to start below a floated element, not next to it. The clear property does that. clear: left means "don't sit next to anything floated left", clear: right does the same for the right side, and clear: both clears both.

.post h2 {
  clear: both;
}

Now each new heading in the article starts below the photo, even if the paragraph above was too short to get past it.

The collapsed parent problem: clearfix and display: flow-root

Floated elements are taken partly out of the normal flow. Their parent no longer "sees" their height. So if a box contains only a floated image and a short text, the box can end up shorter than the image, and its border or background stops halfway through the picture. This is called a collapsed parent.

<div class="card">
  <img class="card-img" src="https://picsum.photos/120/120" alt="Profile photo of Sara">
  <p>Sara is a web designer from Lisbon.</p>
</div>

.card {
  border: 2px solid #2563eb;
  padding: 12px;
  display: flow-root;
}

.card-img {
  float: left;
  margin-right: 12px;
}

Without display: flow-root, the blue border wraps only the short text, and the image sticks out below it. With it, the card grows to contain the whole image. flow-root creates a new block formatting context, which is a fancy way of saying "this box contains its floats completely".

Before flow-root existed, developers used the clearfix trick. You will still see it in older code:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

It adds an invisible element at the end of the box that clears the floats, which forces the box to stretch around them. Today, display: flow-root does the same job in one line.

Note: Setting overflow: hidden on the parent also contains floats, and you will see it in old tutorials. But it can cut off shadows and dropdowns, so prefer display: flow-root.

Why we now use Flexbox and Grid for layout

For about ten years, developers built whole page layouts with floats: columns, sidebars, card grids. It worked, but it was fragile. Columns had different heights, you needed clearfixes everywhere, and vertical centering was almost impossible. Float was never meant for this.

Flexbox and Grid were made for layout. They handle equal heights, spacing with gap, alignment and reordering easily. So the modern rule is simple:

• Use float for wrapping text around an image or a pull quote.
• Use Flexbox for rows or columns of items, like a navbar.
• Use Grid for two-dimensional layouts, like a full page or a gallery.

Common mistake: Using float: left on cards to put them in a row. Floats and Flexbox don't mix: on a flex item, float is simply ignored. Use display: flex or display: grid on the parent instead.

Wrapping text around shapes with shape-outside

By default, text wraps around a float's rectangle. shape-outside lets text follow a different shape, like a circle. It only works on floated elements.

.round-photo {
  float: left;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 16px;
}

The photo looks round because of border-radius, and now the text wraps along the curve too, instead of leaving square empty corners. It is a small detail that makes articles feel designed. More shapes are explained on MDN's shape-outside page.

Practice exercise

Write a short recipe with a floated food photo on the right, two paragraphs, and an "Ingredients" heading that always starts below the photo. Put the whole recipe in a box with a border and make sure the border contains the image.

Hint: use float: right on the image, clear: both on the heading, and display: flow-root on the box.

Key takeaways

• float was made to let text wrap around images and quotes.
• clear makes an element start below floated elements.
• Use display: flow-root to stop a parent from collapsing; the clearfix is the old way.
• Use Flexbox and Grid for layout, not floats.
• shape-outside lets text wrap around circles and other shapes.