CSS float and clear: what float does, how to clear it, and where it still fits

float is one of the oldest layout properties in CSS, and for years it was also the most overworked. It was designed for one job, letting text wrap around an image, and for about a decade it was used to build entire page layouts and navigation bars as well. You will still see float menus in older code and older tutorials, so it pays to know how they worked and why nobody builds them that way now.

What float was made for

Picture a printed magazine: a photo sits at the left edge of a column and the text runs down its right side, then returns to full width below it. That is a float.

<article class="note">
  <img class="thumb" src="cooler.jpg" alt="Tower cooler on a workbench" width="160" height="120">
  <p>A tower cooler pulls heat out of the CPU through copper heat pipes and spreads it across a stack of thin fins. A fan pushes air through the fins and out of the case.</p>
  <p>The wider the fin stack, the more surface the air touches. That is why tall coolers can run quieter than small ones: they need less fan speed to move the same heat.</p>
  <h2>Mounting</h2>
  <p>Check the clearance between the cooler and the memory slots before you buy anything.</p>
</article>

.thumb {
  float: left;
  margin: 0 16px 8px 0;
}

.note h2 {
  clear: both;
}

float: left lifts the image out of the normal flow and pushes it against the left edge of its container. The lines of text that follow get shorter so they fit beside it, and once they pass the bottom of the image they go back to full width. float: right does the same on the other side. There are also inline-start and inline-end, which follow the writing direction, so the same CSS works for right-to-left languages.

Two details surprise people. First, only the lines of text move out of the way. The paragraph boxes themselves still run underneath the image, so a paragraph with a background color shows that color behind the float. Second, a floated element is always treated as block-level. A floated span accepts a width and height, just like an element with display: block from the display lesson.

Clear: start below the float

The clear property tells an element not to sit beside a float. clear: left moves it below any left floats, clear: right below right floats, and clear: both below either. In the example, the Mounting heading would otherwise start next to the image if the first two paragraphs are short. With clear: both it always starts below it, so the new section begins on a clean line.

The container that collapses

Floats cause one more problem, and it is the one that shaped years of CSS habits. A float does not count toward the height of its parent. If every child of a box is floated, the box has nothing left to measure and its height drops to zero. Its background and border shrink to a thin line above the content.

The old fix was the clearfix, a small rule that adds an invisible element after the last child and clears it:

/* the classic clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* the modern fix: the box contains its own floats */
.note {
  display: flow-root;
}

display: flow-root was added to CSS for exactly this purpose. It makes the box a new layout context that wraps around its floats, with no extra markup and none of the side effects of the older tricks. Before it existed, people also used overflow: hidden on the parent, which works but cuts off anything that sticks out of the box, such as a dropdown or a focus outline.

How floats ended up running menus

Before flexbox worked in every browser, the standard horizontal menu looked like this:

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* or a clearfix, to stop the collapse */
}

.menu li {
  float: left;
  margin-right: 8px;
}

Each list item floated left, so they lined up in a row. Because every child was floated, the <ul> collapsed and needed a clearfix or overflow: hidden. Whole page layouts were built the same way: a sidebar floated left at 25 percent, the content floated right at 75 percent, and a footer cleared both. Add a border or padding without adjusting the math and the last column dropped onto a new line.

Why flexbox took over

A flex container lines its children up in a row without taking them out of the flow, which removes most of the old pain at once:

• The container keeps its height, so there is nothing to clear and no clearfix.
• gap spaces the items, with no margin on the last item to cancel.
• justify-content can center the items or spread them out. A float can only go left or right; there is no float: center.
• align-items centers items vertically, which floats never could do cleanly.

That is why lesson 17 builds the Project 2 menu with display: flex and no floats at all.

Where float still fits

Text wrapping around something is still float's job, and nothing has replaced it. An image in an article, a pull quote set into a column of text, a small sidebar box inside a long post: float those. For text that wraps around a round or angled shape, shape-outside works together with float, and only with float. For rows of menu items and side-by-side columns, use flexbox or grid.

Try it

Paste the article example into the online HTML editor with the CSS in a <style> element. The editor has no image file to load, so replace the <img> with <div class="thumb" style="width: 160px; height: 120px; background: #8aa4b8;"></div>; a div floats exactly the same way. Remove clear: both and shorten the paragraphs to see the heading jump beside the box, then give .note a background color and float everything inside it to watch the container collapse.