CSS Floats and Clearfix (Legacy Layout) Explained

CSS floats were originally used to wrap text around images and later became a common way to build multi-column layouts before Flexbox and Grid existed. Understanding floats and clearfix is still useful because older stylesheets, third-party themes, and maintenance work often depend on them.

Quick answer: Use float to move an element to the left or right so inline content wraps around it. Use clearfix or another clearing method when a parent collapses because all of its children are floated.

Difficulty: Beginner

You'll understand this better if you know: basic CSS selectors, the box model, and how block and inline elements behave.

1. What Are Floats and Clearfix?

float is a CSS property that takes an element out of the normal document flow and positions it to the left or right side of its container. Text and inline content can flow around it, which is why floats were first popular for images inside articles.

clearfix is a legacy technique used to make a parent element expand to contain floated children. Without clearing, the parent may collapse to zero height because floated children no longer contribute to its normal flow height.

float is about positioning an element left or right.
clear tells an element to move below floated elements.
Clearfix is a way to make a container recognize floated children again.
Floats are best thought of as a legacy layout tool, not a modern page layout system.

2. Why Floats and Clearfix Matter

Floats still matter because you will encounter them in older websites, CMS themes, documentation sites, and vendor stylesheets. If you do not understand them, common layout bugs such as collapsed containers, overlapping content, and unexpectedly wrapped text can be difficult to diagnose.

They also teach an important CSS concept: taking an element out of normal flow has consequences for surrounding content and parent sizing. That idea still appears in positioning, absolute layouts, and some modern design patterns.

3. Basic Syntax or Core Idea

The simplest float usage is straightforward: set an element to float left or right, then control whether surrounding content wraps around it.

Float syntax

This example shows the basic properties you will use most often.

.avatar {
  float: left;
  margin: 0 1rem 1rem 0;
}

.text {
  line-height: 1.6;
}

The float: left declaration moves the element to the left, and the margin creates spacing so the text does not touch it.

Clear syntax

The clear property forces an element below floated items.

.footer {
  clear: both;
}

clear: both means the element cannot sit beside a floated element on either side.

4. Step-by-Step Examples

Example 1: Floating an image in article text

This is the original and still-valid use case for floats: letting text wrap around an image.

img.article-image {
  float: right;
  margin: 0 0 1rem 1rem;
}

The image sits on the right, and surrounding text wraps around the left side. The margin keeps the layout readable.

Example 2: Two-column layout with floats

Older layouts often used floated columns because Flexbox was not available. Here is a classic pattern.

.sidebar {
  float: left;
  width: 30%;
}

.content {
  float: right;
  width: 70%;
}

Both columns float, so they can sit next to each other. In older code, a clearing method is usually needed after them.

Example 3: Clearing below a floated navigation

When a floated element appears before another block element, the next block may wrap beside it unless you clear it.

.nav {
  float: left;
  width: 200px;
}

.main {
  clear: both;
}

The main content starts below the floated navigation instead of flowing beside it.

Example 4: Creating a clearfix

When a container only contains floated children, it may collapse. A clearfix restores the container’s height without adding extra markup.

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

Applying this class to the parent makes it expand around the floated children. This is the classic clearfix pattern.

5. Practical Use Cases

Wrapping text around an image inside an article or blog post.
Maintaining old two-column or three-column layouts that were built before Flexbox.
Clearing a floated header, sidebar, or toolbar so later content begins below it.
Working with legacy themes where changing the entire layout system is not practical.
Debugging third-party CSS that still uses float-based grids.

6. Common Mistakes

Mistake 1: Forgetting that floated elements are removed from normal flow

Many beginners expect a floated child to make its parent grow automatically. It does not, because floats no longer contribute to the parent’s normal flow height.

Problem: The parent collapses and following content can overlap it because the floated children are not counted in the container height.

.card {
  border: 1px solid #ccc;
}

.card img {
  float: left;
}

Fix: Add a clearfix to the parent, or use another containment technique that fits your layout.

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

.card {
  border: 1px solid #ccc;
}

The clearfix makes the parent account for the floated image again.

Mistake 2: Using float for modern page layout

Float-based columns can work, but they are hard to control compared with Flexbox or Grid. New layouts often become fragile when floats are used for something they were not designed for.

Problem: The layout may require extra clearing rules, width calculations, and overflow fixes, which makes it harder to maintain than a modern layout system.

.layout-column {
  float: left;
  width: 50%;
}

Fix: Keep floats for wrapping content around small elements, and use Flexbox or Grid for page structure when possible.

.layout {
  display: flex;
}

.layout-column {
  flex: 1;
}

The corrected version is easier to maintain because Flexbox handles alignment and sizing without clearing hacks.

Mistake 3: Expecting clear to remove the float

The clear property does not cancel a float. It only prevents the current element from sitting beside floated elements.

Problem: The floated element still affects surrounding content, so changing clear on the wrong element does not solve overlap or wrapping problems.

.image {
  float: left;
}

.image {
  clear: both;
}

Fix: Remove the float if you no longer want floated behavior, or clear a different element that should appear below it.

.image {
  float: none;
}

.caption {
  clear: both;
}

The fix works because you either stop floating the element or clear the element that needs to move below it.

7. Best Practices

1. Use floats for text wrapping, not full page structure

Floats are still ideal for images, pull quotes, and small UI elements that should sit beside text. They are less suitable for controlling large-scale layout.

.pullquote {
  float: right;
  width: 40%;
  margin: 0 0 1rem 1rem;
}

This keeps float usage limited to the job it handles well.

2. Prefer clearfix over extra markup

Older code sometimes added empty clearing elements just to force a container to expand. A pseudo-element clearfix is cleaner because it does not change the HTML structure.

/* Less preferred: requires an extra clearing element in markup */
.clear {
  clear: both;
}

/* Preferred: reusable clearfix on the parent */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

This improves maintainability because the markup stays simpler.

3. Add spacing explicitly around floated elements

Floated elements often sit very close to surrounding content unless you add margins. Spacing makes the layout easier to read and prevents text collisions.

.thumbnail {
  float: left;
  margin: 0 1rem 1rem 0;
}

Explicit margins make wrapped text look intentional instead of cramped.

8. Limitations and Edge Cases

Floats only move elements left or right; they do not center content on their own.
Floated elements can collapse their parent’s height if nothing clears them.
Floats interact with text and inline content differently from Flexbox and Grid, which can surprise developers used to modern layout tools.
When several floats are used together, widths must fit within the container or items may wrap unexpectedly.
A float can still be affected by margins, borders, and available width, so small changes may cause line breaks in older layouts.
Legacy browser code may depend on clearfix patterns that are unnecessary if the layout is rewritten with modern CSS.

One common “not working” scenario is a floated element appearing below another item instead of beside it. That usually means there is not enough horizontal space, or an earlier float has already consumed the available width.

9. Practical Mini Project

In this small example, you will build a news teaser with an image that floats beside a short summary, plus a clearfix so the card keeps its border around the floated image.

.story {
  border: 1px solid #ddd;
  padding: 1rem;
}

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

.story-image {
  float: left;
  width: 120px;
  margin: 0 1rem 1rem 0;
}

.story-title {
  margin: 0 0 0.5rem;
}

This pattern keeps the image beside the text while preserving the card border around both elements. It is a classic example of a float plus clearfix working together.

10. Key Points

float moves an element left or right and lets text wrap around it.
clear pushes an element below floated elements.
Clearfix is used to make a parent contain floated children.
Floats are useful for small wrapping layouts, not as the main system for modern page structure.
If you see collapsing containers in old CSS, a missing clearfix is often the cause.

11. Practice Exercise

Create a profile card where the avatar floats left, the name and bio wrap beside it, and the card border encloses everything.

Float a square image to the left.
Add spacing between the image and the text.
Make the parent element expand around the floated image.
Keep the layout readable on small content blocks.

Expected output: A bordered card with an avatar on the left and text flowing beside it, without the border collapsing.

Hint: Float the image and apply a clearfix to the parent container.

Solution:

.profile-card {
  border: 1px solid #ccc;
  padding: 1rem;
}

.profile-card::after {
  content: "";
  display: table;
  clear: both;
}

.profile-avatar {
  float: left;
  width: 96px;
  height: 96px;
  margin: 0 1rem 1rem 0;
}

.profile-name {
  margin: 0 0 0.5rem;
}

.profile-bio {
  margin: 0;
}

12. Final Summary

CSS floats are a legacy layout tool that still has practical value, especially for wrapped text and older codebases. They move elements left or right, and the surrounding content flows around them.

Clearfix exists because floated children are removed from normal flow, which can cause parent containers to collapse. By using a pseudo-element clearfix, you can keep older float-based layouts stable without extra markup.

If you are maintaining legacy CSS, floats are worth understanding. If you are building a new page layout, prefer Flexbox or Grid and reserve floats for the wrapping behavior they were designed to provide.