CSS Float Not Working — Clearfix and Fix (2026) | Tutorials Logic

Why is CSS Float Not Working?

CSS float was originally designed for text wrapping around images, but was widely used for layouts before Flexbox and Grid. Common issues include container collapse (parent shrinks to zero height), elements not clearing floats, and unexpected text wrapping. Modern layouts should use Flexbox or Grid instead.

Common Symptoms:
Parent container collapses • Elements not side by side • Text wrapping unexpectedly • Layout breaking

Common Causes

Parent container collapses because floated children are removed from flow
Missing clear: both after floated elements
Floated elements have different heights causing layout breaks
Not clearing floats before a new section
Using float for layout instead of Flexbox/Grid

Quick Fix (TL;DR)

Quick Solution

/* ❌ Problem — container collapses */
.container { background: lightblue; }
.child { float: left; height: 100px; }
/* Container has 0 height! */

/* ✅ Solution 1: Clearfix */
.container::after {
  content: '';
  display: table;
  clear: both;
}

/* ✅ Solution 2: overflow: hidden */
.container { overflow: hidden; }

/* ✅ Best solution: Use Flexbox instead */
.container { display: flex; gap: 16px; }

Common Scenarios & Solutions

Scenario 1: Container Collapse (Clearfix)

Problem

/* ❌ Floated children cause parent to collapse */
.container { background: lightblue; padding: 10px; }
.left  { float: left;  width: 50%; }
.right { float: right; width: 50%; }
/* Container height = 0 — background not visible! */

Solution

/* ✅ Modern clearfix */
.container::after {
  content: '';
  display: table;
  clear: both;
}

/* ✅ Or overflow: hidden (simpler) */
.container { overflow: hidden; }

/* ✅ Or display: flow-root (modern, no side effects) */
.container { display: flow-root; }

Scenario 2: Elements Not Clearing Float

Problem

/* ❌ Footer wraps around floated sidebar */
.sidebar { float: left; width: 30%; }
.content { float: right; width: 70%; }
.footer { /* Wraps around floated elements! */ }

Solution

/* ✅ Clear floats before footer */
.footer { clear: both; }

/* ✅ Or use a clearfix div in HTML */
/*  */
.clearfix { clear: both; }

Scenario 3: Image Float with Text Wrap

Solution

/* ✅ Float image with text wrap (original use case) */
.article img {
  float: left;
  margin: 0 16px 16px 0; /* Space between image and text */
  max-width: 300px;
}

/* ✅ Clear after article to prevent affecting next section */
.article::after {
  content: '';
  display: table;
  clear: both;
}

Scenario 4: Modern Alternative — Use Flexbox

Solution

/* ✅ Replace float layout with Flexbox */
/* Old float approach */
.sidebar { float: left; width: 30%; }
.content { float: right; width: 70%; }

/* Modern Flexbox approach */
.layout {
  display: flex;
  gap: 24px;
}
.sidebar { flex: 0 0 30%; }
.content  { flex: 1; }

/* ✅ Or CSS Grid */
.layout {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 24px;
}

Best Practices to Avoid This Error

Use Flexbox or Grid for layouts - Float is outdated for layout purposes
Use display: flow-root for clearfix - Modern, no side effects
Always clear floats - Use clearfix or overflow: hidden on containers
Reserve float for text wrapping - Its original intended use case
Add clear: both before new sections - Prevents layout contamination
Use equal heights with Flexbox - Float columns have unequal height issues
Test in multiple browsers - Float behavior can vary

Related Issues

Key Takeaways

Floated elements are removed from document flow, causing parent containers to collapse
Use clearfix (::after with clear: both) or display: flow-root to fix container collapse
Use clear: both on elements that should appear below floated elements
display: flow-root is the modern, side-effect-free way to contain floats
For layouts, use Flexbox or Grid instead of float — they're more powerful and predictable
Float is still useful for its original purpose: wrapping text around images