CSS Float

Float was designed to wrap text around images. It removes the element from normal flow and lets inline content flow around it. For building layouts, prefer Flexbox or Grid.

1) Float Left/Right & Text Wrapping


.float-left  { float: left; margin: 0 12px 6px 0; }
.float-right { float: right; margin: 0 0 6px 12px; }
IMG

This paragraph wraps around the floated image on the left. Floats take the element out of normal flow, letting inline text flow along the remaining width. Resize to see how the text reflows around the floated box.

2) Clearing Floats


.clr { clear: both; } /* or left/right */
IMG

Content wraps around the right-floated image. To start content below all floats, add an element with clear: both.

Now this line sits below the floated image because of the clear.

3) The Clearfix Utility


.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
Badge 1 Badge 2 Badge 3 Badge 4 Badge 5

The container expands to wrap floated children because of .clearfix.

Tip: Without clearfix, parent height may collapse.

4) Two-Column Layout (Legacy Float Technique)


.col-left  { float: left;  width: 60%; }
.col-right { float: right; width: 35%; }
.float-layout::after { content: ""; display: block; clear: both; }
Main Content

Floats used to create multi-column layouts, but Flexbox/Grid are easier and more robust.

5) Common Pitfalls & Fixes


/* 1) Parent height collapse → use clearfix or overflow:auto on parent */
.parent { overflow: auto; } /* creates a new block formatting context */

/* 2) Content overlapping around floats → add margin to floated element */
.float-left { margin-right: 12px; }

Prefer Modern Layouts:

  • Use display: flex or display: grid for page and component layouts.
  • Reserve float for text wrapping around media (its original purpose).
  • Clear with .clearfix or create a new formatting context on the parent via overflow:auto.