🌊 CSS float — Complete Tutorial

🌐 What Is float in CSS?

The float property allows an element to shift to the **left** or **right** of its container, letting text and inline elements wrap around it. Originally designed for magazine-style layouts (like images wrapped by text),float was later used for layout hacks before Flexbox and Grid existed.

>>“Float was the first layout mechanism in CSS — now mostly used for text wrapping.”

Note

✔ Best for text-wrapping around images
✔ Not recommended for full layout systems today
✔ Must be cleared to prevent layout breaking

📦 Syntax

float syntax

float: left | right | none | inline-start | inline-end;

📌 Values Explained

ValueDescription
leftPushes element to the left
rightPushes element to the right
noneDisables floating
inline-startFloat based on writing direction (LTR → left)
inline-endFloat opposite of inline-start

🎯 Basic Example — Image Wrapped by Text

Float image left

img {
  float: left;
  margin: 0 1rem 1rem 0;
}

The text flows around the image just like in newspapers or blogs.

📌 Clearing Floats

Floating elements are removed from normal document flow. That means parent containers may collapse unless you **clear** them.

✔ Using clear

clear examples

.footer {
  clear: both;
}

clear options:

  • clear: left;
  • clear: right;
  • clear: both;

✔ The Clearfix Hack

A classic solution for containers collapsing due to floated children.

Clearfix hack

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

Add class="clearfix" to the parent.

📌 Float for Side-by-Side Elements (Old-School Layout)

Float layout

.box {
  float: left;
  width: 33.33%;
}

Before Flexbox/Grid, floating was the only way to create multi-column layouts. Today, **avoid using floats for layout**.

📌 Inline-Flow Floats (Writing Modes)

inline-start float

.banner {
  float: inline-end;
}

Floats adjust automatically based on language direction (LTR/RTL).

🧪 Real-World Examples

1️⃣ Blog Image with Text Wrap

Blog-style float

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

2️⃣ Product Info & Small Thumbnail

Product float example

.thumb {
  float: left;
  width: 120px;
  margin-right: 1rem;
}

3️⃣ Magazine Layout Text Box

Magazine text box

.highlight-box {
  float: right;
  width: 200px;
  padding: 10px;
  background: #f5f5f5;
  margin-left: 1rem;
}

⚠️ Limitations of Float

  • ❌ Not meant for full layouts (use Flexbox or Grid instead)
  • ❌ Requires clearfix methods
  • ❌ Hard to center elements
  • ❌ Doesn’t support vertical alignment

Note

Float is now mostly used for **wrapping inline text** around an element — not for modern layout systems.

🔥 Summary

The float property allows elements to shift left or right and lets surrounding text wrap around them. While historically used for full layouts, today its primary use is for text-flow effects like blog images, side notes, and magazine-style content.

>>“Float is powerful for text wrapping — but Flexbox/Grid rule modern layouts.”

Learn more →MDN Docs 📘