← Back to Chapters

CSS Float

? CSS Float

The float property positions an element to the left or right of its container so that surrounding inline content (like text) flows around it. Classic use cases are images, small info boxes, and older layout techniques.

? Quick Overview

Floats were originally designed to wrap text around images (like in newspapers). When you float an element, it is taken out of the normal document flow and pushed to the left or right edge of its container. Other inline content then wraps around that floated element.

  • float: left; – push element to the left, content wraps on the right.
  • float: right; – push element to the right, content wraps on the left.
  • float: none; – default behavior (no floating).
  • clear – used to stop wrapping and push content below floated elements.

? Key Concepts

  • Floated elements are removed from normal flow: other block elements may ignore their height.
  • Content wrapping: inline content (text, inline-blocks) flows around the floated element.
  • Clearing floats: use clear or a clearfix technique to make a container wrap its floats.
  • Modern layouts: for full page layout, prefer Flexbox or Grid instead of floats.

? Syntax & Theory

The basic syntax of the float property is:

? View Code Example 
/* Basic float syntax on an element */
.element {
  float: left;  /* left | right | none | inline-start | inline-end */
}

When you float child elements, the parent’s height might collapse because floats are not considered part of the normal flow. To fix this, you usually:

  1. Use a clearfix utility class, or
  2. Apply properties like overflow: auto; or display: flow-root; to the parent.

? Code Examples

? Example 1 — Float Left

The float: left; property positions the element to the left and allows other content to flow around it on the right.

? View Code Example 
/* Box floated to the left so text wraps on the right */
.box-left {
  float: left;
  width: 120px;
  padding: 10px;
  margin: 0 16px 8px 0;
  background-color: #38bdf8;
  color: #ffffff;
  text-align: center;
}

? Live Output / Explanation

Left

This text wraps around the floated box. The blue box is floated to the left using float: left;. Because it is taken out of the normal flow, the paragraph text flows on the right-hand side, filling the remaining horizontal space.

The paragraph above demonstrates how floats affect inline content. The line with clear: both; (applied here inline) ensures that this text appears below the floated box.

? Example 2 — Float Right

The float: right; property pushes the element to the right side, letting other content wrap on the left side.

? View Code Example 
/* Box floated to the right so text wraps on the left */
.box-right {
  float: right;
  width: 120px;
  padding: 10px;
  margin: 0 0 8px 16px;
  background-color: #a855f7;
  color: #ffffff;
  text-align: center;
}

? Live Output / Explanation

Right

Here, the box is floated to the right using float: right;. The paragraph text flows on the left, wrapping neatly around the box. This pattern is commonly used for small side notes or images aligned to the right.

Again, a cleared element ensures the following content starts below the floated box instead of wrapping around it.

? Example 3 — Clearfix (Clearing Floats on a Container)

When all children inside a container are floated, the container’s height may become zero. A common fix is to use a clearfix helper class.

? View Code Example 
/* Clearfix to force a parent to wrap its floated children */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

? Live Output / Explanation

Box 1
Box 2

This container simulates the .clearfix behavior by concept: after both boxes are floated, the clearfix pseudo-element expands the parent so its border surrounds both floated boxes.

Without a clearfix (or similar technique), the parent’s border would collapse and might not appear around the floated children at all.

? Example 4 — The clear Property

The clear property prevents an element from wrapping around a float. It can take values like left, right, or both.

? View Code Example 
/* Force an element to appear below floated elements */
.clear-both {
  clear: both;   /* stop wrapping from left and right floats */
  margin-top: 12px;
}

? Live Output / Explanation

Float

This paragraph starts next to the floated box. Notice how the first few lines wrap around the orange box because it is floated to the left.

This paragraph uses clear: both;, so it is pushed below the floated element and no longer wraps around it.

? Common Use Cases

  • Wrapping text around images in articles or blog posts.
  • Creating small info boxes or callouts aligned left or right within text.
  • Legacy column-based layouts (now mostly replaced by Flexbox and Grid).

✅ Best Practices with Floats

  • Use float for simple tasks like wrapping text around images or small elements.
  • Avoid using floats for full-page layouts; prefer Flexbox or CSS Grid for that.
  • Always clear your floats (with clear, clearfix, or modern alternatives) to avoid layout issues.
  • Be careful when mixing floated elements with flex or grid containers—understand which system controls layout.
  • Keep float utilities small and reusable, e.g. .float-left, .float-right, .clearfix.

? Practice Tasks

  1. Create a box and float it to the left. Add at least two paragraphs of text and observe how the text wraps around the box.
  2. Create another box floated to the right. Add a paragraph below that uses clear: both; so it appears entirely below both floats.
  3. Implement a .clearfix class and apply it to a container with two floated child elements. Inspect the container’s height with and without the clearfix.
  4. Build a small “article layout” with an image floated left or right and text content wrapping around it.
  5. Rebuild one of your float-based layouts using Flexbox or Grid and compare the code complexity and behavior.