Floats

The float property moves an element to the left or right edge, and text flows around it, as in a newspaper or a magazine. Whole websites used to be built on float. Today it has one honest job left — wrapping text around an image, but you will see it in old code all the time.

Wrapping text around an image

float: left pushes the image to the left edge, and the lines of text go to the right of it, then use the full width again below:

<style>
  .photo { float: left; width: 120px; height: 120px; margin: 0 12px 8px 0; }
</style>
 
<img class="photo" src="/media/photo-200x200.jpg" alt="Mountains and water">
<p>Fjords are narrow sea inlets between high cliffs. Their shores rise almost vertically, and the water below can be surprisingly calm. Tourists come here for the views, hiking trails and boat trips. In summer the sun hardly sets, so you can walk until late at night.</p>

The right and bottom margin keeps the text from sticking to the image.

Float values

Value	What it does
`left`	pushes the element left, text flows on the right
`right`	pushes the element right, text flows on the left
`none`	no floating (the default)

float: right suits, for example, a pull quote — a short quote on the side of an article:

<style>
  .quote { float: right; width: 140px; margin: 0 0 8px 12px; padding: 8px; border-left: 4px solid gold; font-style: italic; }
</style>
 
<p><span class="quote">"The best view comes after a hard climb"</span>The trail to the viewpoint takes about two hours. It runs over rocks, so comfortable shoes are a must. It is windy at the top, so take a jacket even on a hot day.</p>

The parent collapses

A floated element drops out of the normal flow: the parent does not count its height. If there is little text, the image sticks out of the container's border:

<style>
  .card { border: 2px solid steelblue; padding: 8px; }
  .card img { float: left; width: 80px; height: 80px; margin-right: 8px; }
</style>
 
<div class="card">
  <img src="/media/photo-200x200.jpg" alt="Mountains and water">
  A short caption.
</div>

display: flow-root

To make the container wrap the floated element completely, give it display: flow-root. The block becomes a separate area that counts everything floating inside it:

<style>
  .card { display: flow-root; border: 2px solid steelblue; padding: 8px; }
  .card img { float: left; width: 80px; height: 80px; margin-right: 8px; }
</style>
 
<div class="card">
  <img src="/media/photo-200x200.jpg" alt="Mountains and water">
  A short caption.
</div>

The border now runs below the image.

clear — start below

The clear property forbids an element to stand next to floats: it moves down below them. clear: left goes below left floats, clear: right below right ones, clear: both below any:

<style>
  img { float: left; width: 80px; height: 80px; margin-right: 8px; }
  h3 { clear: both; margin: 8px 0 0; }
</style>
 
<img src="/media/photo-200x200.jpg" alt="Mountains and water">
<p>Text next to the image.</p>
<h3>A new section — below the image</h3>

Remove clear: both, and the heading moves to the right of the image.

Float in old code

Before flexbox, columns and grids were built from floated blocks. To keep the parent from collapsing, a "hack" class called clearfix was added to it:

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

When you see such code, you know it is a layout from the past. New layouts are made with flexbox and grid, and float is kept for wrapping text.

Common mistake

float does nothing inside a flex or grid container: the container places the items itself, and floating is ignored:

<style>
  .row { display: flex; gap: 8px; padding: 8px; background: whitesmoke; }
  .row div { padding: 8px; background: lightskyblue; }
  .right { float: right; }
</style>
 
<div class="row">
  <div>First</div>
  <div class="right">float: right did not work</div>
</div>

To push an item to the right in a flex container, use margin-left: auto.

Thanks for reading!