The CSS float property

Q: How do I stop content wrapping around a float?

Use the clear property on the following element, e.g. clear: both, so it drops below the float instead of sitting beside it.

Q: How do I wrap text around an image?

Float the image with float: left (or right) and give it a margin on the wrapping side so the text keeps a comfortable distance.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS float property pushes an element to the left or right and lets the following text and inline content wrap around it — its classic use is floating an image beside a paragraph. Once the backbone of page layout, it has been replaced for that job by Flexbox and Grid; today it is mainly for wrapping text around figures.

Overview

float takes an element out of the normal flow and shifts it to the left or right edge of its container, while letting the content that comes after it wrap neatly around the side. Float an image left, and the paragraph beside it flows around its right — the magazine-style text wrap that floats were originally invented for.

For years floats were also how entire page layouts were built, with cleared rows and clever hacks holding columns together. That era is over. Flexbox and Grid do layout better in every way, so if you are reaching for float to put boxes side by side, reach for one of those instead.

Where it still shines is its original job: wrapping text around a figure, a pull-quote or a drop cap. Its companion is the clear property, which tells an element to drop below any earlier floats rather than sitting alongside them, and the modern shape-outside can even make text wrap around a circle or a custom shape.

Syntax

/* wrap text around an image */
img {
  float: left;
  margin: 0 16px 8px 0;
}

Values

The float property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`left`	Floats the element to the left; following content wraps around its right side.
`right`	Floats the element to the right; following content wraps around its left side.
`none`	The element does not float. The default.

Example

Live example

<style>
  .fig { float: left; width: 90px; height: 90px; background: #1c7ce9; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin: 0 16px 8px 0; font: 600 13px system-ui, sans-serif; }
  .wrap { font: 15px/1.6 system-ui, sans-serif; }
</style>
<div class="wrap">
  <div class="fig">figure</div>
  The paragraph text flows around the floated box on its right, the original job floats were made for. Add enough copy and it wraps neatly underneath once it clears the bottom edge.
</div>

Best practices

Use float for its real strength — wrapping text around an image or figure — not for column layouts.
For side-by-side boxes and page structure, use Flexbox or Grid instead; they avoid the clearing hacks floats needed.
Add a margin on the side the text wraps so the words do not touch the floated element.
Use the clear property (or a flow-root container) to stop later content from rising up alongside a float.

Frequently asked questions

What does the float property do?

It shifts an element to the left or right of its container and lets following text and inline content wrap around it — most often used to float an image beside a paragraph.

Should I use float for layout?

No longer. Flexbox and Grid handle layout far better. Floats are now mainly for wrapping text around figures, which is what they were designed for.

How do I stop content wrapping around a float?

Use the clear property on the following element, e.g. clear: both, so it drops below the float instead of sitting beside it.

How do I wrap text around an image?

Float the image with float: left (or right) and give it a margin on the wrapping side so the text keeps a comfortable distance.

flex-wrap font-family

References