🧹 CSS clear — Complete Tutorial

🌐 What Is clear?

The clear property is used to control the behavior of an element in relation to floated elements. When elements are floated using float: left or float: right, they may cause layout overlaps.clear ensures that an element is forced to move **below floated elements**.

>>“Use clear when you want an element to avoid or stop floating elements.”

Note

✔ Works only with floated elements
✔ Prevents layout overlap
✔ Commonly used in clearfix techniques

📦 Syntax

Basic Syntax

clear: none | left | right | both | inline-start | inline-end;

📌 Clear Values Explained

ValueMeaning
noneDefault. Allows the element to be next to floats.
leftElement must move below any left-floating elements.
rightElement must move below any right-floating elements.
bothElement must move below both left & right floats.
inline-startAvoid floats at block-start side (depending on writing mode).
inline-endAvoid floats at block-end side.

📌 1. Basic Example — Prevent Overlapping Floats

Float + clear usage

img {
  float: right;
  width: 150px;
}

p.clear {
  clear: right;
}

The paragraph with clear: right will move below the floated image.

📌 2. Clearing Both Sides

Clear both

footer {
  clear: both;
  background: #eee;
  padding: 1rem;
}

Ensures the footer never overlaps floating elements above.

📌 3. Classic Clearfix Technique

When a container has floated children, its height collapses. The "clearfix" adds an invisible block after the container to clear floats.

Clearfix hack

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

Add class="clearfix" to any parent container.

📌 4. Using Clear with Writing Modes

inline-start and inline-end adapt based ondirection: rtl or vertical writing modes.

inline-aware clear

.box {
  clear: inline-start;
}

🧪 Real-World Examples

1️⃣ Blog Image with Wrapped Text

Avoid floating image overlap

img.blog-img {
  float: left;
  margin: 0 1rem 1rem 0;
}

.more-content {
  clear: left;
}

2️⃣ Multi-Column Legacy Layout Fix

Old layout floats

.column {
  float: left;
  width: 33%;
}

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

3️⃣ Promo Box Beside an Image

Promo box

.promo-box {
  float: right;
  width: 200px;
}

.text-section {
  clear: right;
}

⚠️ Limitations of clear

  • ❗ Only affects floated elements — not normal block flow
  • ❗ Clearfix is a workaround for float layout issues
  • ❗ Modern layout engines (Flexbox/Grid) rarely require clear
  • ❗ Overuse can lead to awkward spacing

Note

In modern CSS, prefer **Flexbox/Grid** for layout and use floats only when wrapping content around images or small blocks.

🔥 Summary

The clear property is essential when working with floated elements. It prevents overlapping, restores document flow, and is a key part of classic clearfix techniques. Although float-based layouts are outdated, clear remains useful for blog layouts and text-wrapping designs.

>>“clear ensures clean, predictable layouts when floats are involved.”

Learn more →MDN Docs 📘