CSS — Float

What is Float?

The float property pulls an element to the left or right, allowing text and inline elements to wrap around it. Originally designed for magazine-style text wrapping, it was later used for page layouts.

img {
  float: left;
  margin-right: 16px;
}

Float Values

.left { float: left; }
.right { float: right; }
.none { float: none; }    /* default */

Text Wrapping (Original Purpose)

.article img {
  float: left;
  margin: 0 16px 8px 0;
  max-width: 200px;
}

.article p {
  line-height: 1.6;
}

<article class="article">
  <img src="photo.jpg" alt="Photo">
  <p>This text wraps around the floated image, just like in a magazine layout. The image is pulled to the left and the text flows around it naturally.</p>
</article>

Float for Layouts (Legacy)

Before Flexbox and Grid, floats were the primary layout tool:

Two-Column Layout

.sidebar {
  float: left;
  width: 25%;
}

.content {
  float: left;
  width: 75%;
}

Three-Column Layout

.col { float: left; width: 33.33%; }
.col:nth-child(odd) { background: #f5f5f5; }

The Clearing Problem

Floated elements are removed from normal flow, so their parent container collapses:

.container {
  background: lightblue;
}

.float-box {
  float: left;
  width: 100px;
  height: 100px;
}

The container has zero height because floated children don't contribute to it.

Solutions

clear: both

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

overflow: hidden

.container {
  overflow: hidden;  /* creates a new block formatting context */
}

Clearfix Hack

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

/* Usage */
<div class="clearfix">
  <div class="float-box">Box 1</div>
  <div class="float-box">Box 2</div>
</div>

Float vs Modern Alternatives

Layout Need	Use Float	Use Flexbox	Use Grid
Text wrap around image	✅	❌	❌
Simple two-column	Maybe	✅	✅
Complex layouts	❌	✅	✅
Equal-height columns	❌	✅	✅

When to Still Use Float

• Text wrapping around images — this is what float was designed for
• Legacy code maintenance — you'll encounter it in older projects
• Email templates — some email clients don't support Flexbox

Modern Alternative: Flexbox

/* Old float way */
.sidebar { float: left; width: 30%; }
.content { float: left; width: 70%; }

/* Modern flexbox way */
.container {
  display: flex;
}
.sidebar { flex: 0 0 30%; }
.content { flex: 1; }

Practical Example: Image Gallery

.gallery {
  overflow: hidden;  /* clearfix */
}

.gallery img {
  float: left;
  width: 33.33%;
  padding: 8px;
  box-sizing: border-box;
}

<div class="gallery">
  <img src="photo1.jpg" alt="Photo 1">
  <img src="photo2.jpg" alt="Photo 2">
  <img src="photo3.jpg" alt="Photo 3">
</div>

Best Practices

• Use Flexbox or Grid for new layouts — they're easier and more powerful
• Use float only for text wrapping around images
• Always clear floats to prevent container collapse
• Don't use float for page layout in new projects
• Learn float for understanding legacy code

Mini Practice

1. Create a text-wrapping layout with an image floated left
2. Build a two-column layout using floats and clearfix
3. Convert a float layout to Flexbox
4. Create a simple image gallery with floated images
5. Debug a container collapse issue

Up Next

Next: Display →