Float & Clear

Float is an old-school layout tool. Before Flexbox and Grid, floats were how you built multi-column layouts. They are less common now, but you will still see them in older sites, and they are perfect for wrapping text around images.

Float

The float property pushes an element to the left or right, letting other content wrap around it:

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

Floated elements are removed from the normal flow. Text and inline elements wrap around them. Block elements behind them ignore the float.

Float Values

You have three options:

• left — floats to the left, content wraps on the right
• right — floats to the right, content wraps on the left
• none — the default, no float

.left  { float: left; }
.right { float: right; }

Clear

When you float an element, things after it might sit next to it instead of below it. The clear property forces an element to move below any floated elements:

.footer {
  clear: both;
}

Clear values:

• left — clears left floats
• right — clears right floats
• both — clears both sides (most common)
• none — the default

The Float Layout Pattern

Before modern CSS, developers used float to create layouts like this:

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

This created a two-column layout. The problem was that floated elements did not stretch their container, so developers had to use "clearfix" hacks. Today, Flexbox and Grid handle layouts much more elegantly, but understanding float helps you maintain old code.