Skip to content
Laviyx Learn

Try

CSS course menu

CSS Floats: Wrapping Text Around Images and Clearing Floats

Learn what CSS float is for today (wrapping text around images), how float and clear work, how to contain floats with display flow-root, shape-outside for non-rectangular wrapping, and why Flexbox and Grid replaced float layouts.

Intermediate5 min readUpdated
On this page

float moves an element to the left or right side of its container and lets text and inline content wrap around it, like a picture in a newspaper article. For years, floats were also abused to build whole page layouts. Today Flexbox and Grid do that job, and floats are back to their original purpose.

Wrapping text around an image#

CSS
.article { max-width: 460px; font-family: Georgia, serif; line-height: 1.5; }
.article img {
  float: left;
  margin: 4px 14px 6px 0;
  border-radius: 6px;
}
HTML
<div class="article">
  <img src="/lesson-assets/mango.svg" alt="A ripe mango" width="90" height="90">
  <p>Mangoes have been grown in South Asia for thousands of years, and hundreds of varieties are known today. Some are eaten ripe as a sweet fruit, while green mangoes are used in pickles, chutneys and summer drinks. The text flows down the right side of the image and then continues underneath it once the image ends.</p>
</div>
Result
  • float: left or float: right (or inline-start / inline-end) moves the element to that side.
  • Following text wraps around it.
  • Margins on the floated element keep the text from touching it.

clear#

clear makes an element move below any floats instead of wrapping beside them:

CSS
.box { float: left; width: 90px; height: 60px; margin-right: 10px; background: #9cc9a8; }
.cleared { clear: both; background: #fff3c4; }
HTML
<div class="box"></div>
<p>This paragraph wraps beside the float.</p>
<p class="cleared">This paragraph has clear: both, so it starts below the float.</p>
Result

clear: left, right or both choose which floats to move below.

Containing floats#

A floated element is taken out of the normal flow, so its parent does not grow to contain it. If the text is shorter than the image, the image hangs out of the bottom of its container:

CSS
.card { border: 2px solid #2f5fe0; padding: 8px; margin-bottom: 30px; }
.card img { float: left; margin-right: 10px; }
.contained { display: flow-root; }
HTML
<div class="card">
  <img src="/lesson-assets/mango.svg" alt="" width="70" height="70">
  Short text. The image sticks out.
</div>
<div class="card contained">
  <img src="/lesson-assets/mango.svg" alt="" width="70" height="70">
  With display: flow-root, the card contains the float.
</div>
Result

display: flow-root makes the container wrap around its floats. In older code you will see the "clearfix" hack, a ::after pseudo-element with clear: both, which did the same before flow-root existed.

Wrapping around shapes#

shape-outside makes text wrap along a shape instead of the float's rectangle:

CSS
.circle {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 50%;
  background: #ffd34d;
  shape-outside: circle(50%);
}
p { max-width: 420px; line-height: 1.5; }
HTML
<div class="circle"></div>
<p>With shape-outside set to a circle, the lines of this paragraph follow the curve of the yellow circle instead of a straight edge, which gives a more editorial look to articles and magazine-style pages. Without it, the text would line up against an invisible square.</p>
Result

Do not use floats for layout#

Before Flexbox and Grid, multi-column layouts were made by floating every column and clearing them afterwards. That approach is fragile: columns have unequal heights, vertical centering is impossible, and clearing is easy to get wrong. If you maintain old code you will meet it, but for new layouts use Flexbox and Grid.

Practice#

Practice exercise

Float a 120px-wide quote box to the right of a paragraph, with a left border and 12px of margin on its left, and make sure the following heading starts below it.

Show solution
CSS
.pull {
  float: right;
  width: 120px;
  margin: 0 0 8px 12px;
  padding-left: 10px;
  border-left: 4px solid #e8590c;
  font-style: italic;
}
h3 { clear: both; }
HTML
<p><span class="pull">"Floats are for wrapping text, not for layout."</span>
Floats push an element to one side so that the paragraph text flows around it. This pull quote is floated to the right, and the paragraph continues on its left, wrapping underneath once the quote ends.</p>
<h3>Next section</h3>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Flexbox: A Complete Beginner's Guide with ExamplesLearn CSS Flexbox with live examples: flex containers and items, flex-direction, main and cross axes, justify-content, align-items, flex-wrap, gap, align-content, and common layouts such as navbars, card rows and sticky footers.Intermediate7 min readCSSCSS Grid Layout: A Complete Beginner's Guide with ExamplesLearn CSS Grid with live examples: grid containers, grid-template-columns and rows, the fr unit, repeat(), gap, minmax(), auto-fit and auto-fill for responsive grids without media queries, spanning cells, and aligning grid items.Intermediate6 min readCSSCSS position: static, relative, absolute, fixed and sticky ExplainedLearn CSS positioning with live examples: static, relative, absolute (and the containing block), fixed and sticky, the top, right, bottom, left and inset properties, and common patterns such as badges, overlays and sticky headers.Intermediate8 min read