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

Syntax

css

selector {
  float: left | right | none;
}

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

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.
Accepted values:
left — floats the element to the left
right — floats the element to the right
none — no float (default)
inline-start | inline-end — direction-aware floats
clear — left | right | both | none stops wrapping around floats
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.
Accepted values:
none — may sit beside floats (initial value)
left — below any left floats
right — below any right floats
both — below floats on both sides
inline-start | inline-end — direction-aware versions
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>

Live Example

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