🌊 Float and Clear Techniques

What Float Really Does

The float property is one of the oldest layout mechanisms still in daily use. It was invented for a single, humble purpose: letting text wrap around an image, exactly the way a newspaper flows a column of words around a photo.

Picture dropping a cork into a stream. The cork rises and stays put on one side, and the water flows around it. A floated element behaves the same way — it's pulled to the left or right edge of its container, pinned there, and the inline content that follows curves around it.

Float was never designed to lay out whole pages. Developers cleverly bent it to that job for a decade — until flexbox and grid arrived and gave us tools built for the purpose.

The Float Property

Float takes three everyday values:

• float: none — the default; the element stays in normal flow.
• float: left — the element hugs the left edge; following content wraps around its right side.
• float: right — the element hugs the right edge; following content wraps around its left side.

/* Float an image left and give the wrapping text some breathing room */
.article-image {
  float: left;
  margin: 0 15px 10px 0;   /* space on the right and below */
}

/* Float a pull quote to the right */
.pull-quote {
  float: right;
  width: 220px;
  margin: 0 0 10px 15px;
}

The Clear Property

Sometimes you want an element to stop wrapping and drop below the floats instead. That's the job of clear. It tells an element which sides must be free of floats before it may sit.

/* A section heading that should always start below any floats above it */
.section-break {
  clear: both;
}

Float and clear are two halves of one idea: float pulls an element aside so content wraps around it, and clear is how the following content declares "no thanks, put me below all that."

The Container-Collapse Problem

Here is the single most infamous float bug. When a container holds only floated children, it collapses to zero height — because the floats have left normal flow, so the parent no longer "sees" them and stretches to fit nothing.

Fix 1 — The modern way: display: flow-root

The cleanest, purpose-built solution. It creates a new block formatting context, which forces the container to contain its floated descendants — no hacks, no extra markup.

.container {
  display: flow-root;
}

Fix 2 — The classic clearfix hack

For years, before flow-root had browser support, developers added an invisible generated element after the floats and cleared it. You'll still see this everywhere in older codebases:

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

Fix 3 — The overflow trick

Setting overflow to anything other than visible also creates a block formatting context. It works, but can clip shadows or dropdowns that need to escape the box, so prefer flow-root:

.container {
  overflow: auto;   /* or hidden — but watch for clipped content */
}

Float in Modern CSS

Flexbox and grid have replaced float for page and component layout. But float hasn't disappeared — it has returned to what it was always best at.

Where float still shines

• Text wrapping around images in article and blog content — flexbox and grid cannot do this.
• Pull quotes and asides embedded inside flowing prose.
• Drop caps — floating an oversized first letter so the paragraph wraps around it.
• Maintaining legacy code that still uses float-based grids.

/* A classic drop cap */
.article p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 0;
  font-weight: 700;
}

Advanced: shape-outside

Float gained a modern superpower with shape-outside, which lets text wrap around a shape rather than a rectangle. It only works on floated elements, so it's an extension of float rather than a replacement:

.round-image {
  float: left;
  width: 160px;
  height: 160px;
  margin-right: 15px;
  shape-outside: circle(50%);   /* text hugs the circle, not the box */
  clip-path: circle(50%);
}

/* The float-based three columns you'd inherit from old code... */
.legacy-columns { display: flow-root; }
.legacy-columns .col { float: left; width: 33.33%; }

/* ...become this with flexbox */
.columns { display: flex; gap: 20px; }
.columns .col { flex: 1; }

Hands-on Exercise

<article class="article">
  <h1>The Return of Float</h1>
  <div class="hero"></div>
  <p>Floats once ruled web layout...</p>
  <blockquote class="pull">"Float is perfect for pull quotes."</blockquote>
  <p>...and today they've found a sharper, smaller role.</p>
  <footer class="end">End of article</footer>
</article>

.article { display: flow-root; max-width: 640px; }
.hero {
  float: left;
  width: 160px; height: 120px;
  background: #cbd5e1;
  margin: 0 16px 8px 0;
}
.article p:first-of-type::first-letter {
  float: left;
  font-size: 3em; line-height: 0.8;
  margin: 0.05em 0.1em 0 0; font-weight: 700;
}
.pull {
  float: right;
  width: 200px;
  margin: 0 0 10px 16px;
  padding: 10px 14px;
  border-left: 4px solid #6366f1;
  font-style: italic;
}
.end { clear: both; padding-top: 12px; }

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — The float property
• MDN — The clear property
• MDN — Block formatting context

🚀 What's Next?

Next we zoom out to the foundation beneath floats and positioning: normal flow — the default way browsers lay out every element before you change a thing. Understanding it is what makes everything else predictable.