CSS Float

Imagine publishing a physical newspaper. When you insert an illustration into an article, you do not want the paragraph text to stay separated on empty lines below it. You want the text to flow and wrap cleanly around the left or right side of the picture. CSS float is that newspaper layout rule. It allows you to push an element to the left or right margin, instructing the surrounding inline text to wrap around it naturally.

In this page:

The Floating Concept
The Collapsed Parent Problem
Clearing Floats with clear
The Modern clearfix Hack
Floats vs. Modern Layout Grids

The Floating Concept

The float property pushes an element to the left or right of its container, allowing surrounding inline text and inline elements to wrap around it. This property was originally designed to format text wrapping around images in news articles.

Note: Use float: left or float: right to wrap text cleanly around media illustrations.

Warning: Floated elements are removed from the normal page flow, which can cause parent containers to collapse if not cleared.

Example: The Floating Concept

css

<style>
img {
  float: left;
  margin-right: 10px;
}
</style>
<div>
  <img src="https://placehold.co/100x100" alt="Floated image">
  <p>Text wraps around the floated image</p>
</div>

The Collapsed Parent Problem

Because floated elements are removed from the normal page flow, parent containers do not calculate their height, collapsing to 0 and causing subsequent elements to run under the floated items.

Note: Use the overflow property on parent containers to quickly clear floated children without adding extra code markup.

Warning: Failing to contain floated children will cause borders and backgrounds on parent elements to collapse completely.

Example: The Collapsed Parent Problem

css

<style>
.parent {
  border: 2px solid red;
}
.child {
  float: left;
  background: lightblue;
  padding: 8px;
}
</style>
<div class="parent">
  <div class="child">Floated child collapses the parent's height</div>
</div>

Clearing Floats with clear

The clear property stops elements from wrapping around preceding floated elements. By applying clear: left, clear: right, or clear: both, you instruct the browser to push the element down below any floated items.

Note: Use clear: both on subsequent headers or footers to keep them from wrapping around floated columns.

Warning: Statically positioned elements that are not cleared can overlap with floated blocks on your page.

Example: Clearing Floats with clear

css

<style>
.box {
  float: left;
  background: lightblue;
  padding: 8px;
}
.footer {
  clear: both;
  background: lightgray;
  padding: 8px;
}
</style>
<div class="box">Floated box</div>
<div class="footer">Pushed below the floated box</div>

The Modern clearfix Hack

The clearfix hack is a standard CSS design pattern used to clear floated elements. By applying a pseudo-element (:after) to the parent container, you can instruct it to clear floats automatically without adding extra, empty div tags to your HTML.

Note: Define a utility class called clearfix in your stylesheet to easily clear any floated containers.

Warning: Make sure your clearfix styles are supported by older browsers if your site supports legacy systems.

Example: The Modern clearfix Hack

css

<style>
.clearfix {
  border: 2px dashed #999;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.child {
  float: left;
  background: lightblue;
  padding: 8px;
}
</style>
<div class="clearfix">
  <div class="child">Floated</div>
</div>

Floats vs. Modern Layout Grids

Before Flexbox and Grid were introduced, developers had to use float: left to build multi-column website layouts. While floats are still highly useful for text-wrapping designs, modern layouts should use Flexbox or Grid for column grids.

Note: Use modern Flexbox or Grid for layout columns, and save floats strictly for text-wrapping designs.

Warning: Using floats to build complex, responsive grids is tedious and prone to layout-breaking errors.

Example: Floats vs. Modern Layout Grids

css

<style>
.old-way {
  float: left;
  width: 50%;
  background: lightblue;
  padding: 8px;
  box-sizing: border-box;
}
.modern-way {
  display: flex;
}
.modern-way div {
  background: lightgreen;
  padding: 8px;
}
</style>
<div class="old-way">Legacy float column</div>
<div class="modern-way">
  <div>Flexbox column</div>
</div>

Common Mistakes

Forgetting to clear floated elements, causing parent containers to collapse and subsequent content to overlap.
Using floats to build complex, multi-column website layouts instead of modern Flexbox or Grid.
Omitting width settings on floated block elements, causing them to expand to 100% and stack vertically instead of floating.

Chapter Summary

The float property pushes elements to the left or right of their container, allowing surrounding text to wrap around them.
Floated elements are removed from the natural page flow, which can cause parent containers to collapse.
Use overflow: auto or the clearfix hack to clear floated elements and contain parent heights cleanly.

Browser Support

The float and clear properties have absolute native support across all modern and legacy web browsers.

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Overflow Next Lesson → CSS Inline-block