CSS Float

CSS CODES & EXAMPLES

CSS Float

Learn how the CSS float property moves elements to the left or right and allows surrounding content to flow around them.

← CSS Overflow Start Learning →

What is CSS Float?

Move elements left or right

The float property was originally designed to allow text to wrap around images. It can move an element toward the left or right side of its container.

left

Moves the element toward the left.

right

Moves the element toward the right.

none

Default value. No floating is applied.

inherit

Uses the float value from its parent.

float: left

Float an element to the left

With float: left;, the element moves to the left side and surrounding inline content can flow around it.

float-left.css

.image {
  float: left;
  width: 150px;
  margin-right: 20px;
}

FLOAT

CSS float allows text to flow around a floated element. This technique was commonly used for image and article layouts before Flexbox and CSS Grid became widely used. The surrounding content can occupy the remaining space beside the floated element.

Float is still useful when creating certain text-wrapping layouts and when working with older CSS designs.

float: right

Float an element to the right

The right value moves the element toward the right side of its containing block.

float-right.css

.image {
  float: right;
  width: 150px;
  margin-left: 20px;
}

FLOAT

This example demonstrates how text can flow around an element floated to the right side of its container. The element is removed from the normal flow in the traditional float layout model.

Image with Text Wrapping

A classic float example

image-float.css

img {
  float: left;
  width: 140px;
  margin: 0 20px 10px 0;
}

CSS

The CSS float property can be used to place an image beside article content. Text then flows around the floated image instead of appearing only above or below it.

This was one of the most common uses of float before modern layout systems such as Flexbox and Grid became standard tools for web developers.

Although modern layouts should generally use Flexbox or Grid, understanding float remains important because you will encounter it in existing websites and older CSS code.

Multiple Floated Elements

Place elements side by side

multiple-float.css

.box {
  float: left;
  width: 30%;
  margin: 1.66%;
}

BOX 1

BOX 2

BOX 3

float: none

Remove floating behavior

The none value is the default. It prevents an element from floating.

float-none.css

.box {
  float: none;
}

FLOAT: NONE

This element follows the normal flow of the document.

The Float Container Problem

Why the parent may collapse

Floated elements are taken out of the normal flow. Because of this, a parent containing only floated children can sometimes collapse to zero height.

float-problem.css

.child {
  float: left;
}

FLOAT 1

FLOAT 2

The parent should be cleared or otherwise contain its floated children.

Clearfix Technique

Contain floated children

A clearfix can be used to make a parent contain its floated children. A modern clearfix commonly uses a pseudo-element.

Float vs Flexbox

Choose the right layout system

CSS Float

Useful for text wrapping
Older layout technique
Requires clearing
Less suitable for complex layouts

CSS Flexbox

Designed for modern layouts
Easy alignment
Excellent for responsive components
No traditional clearfix required

Float Property Reference

Quick revision

Value	Effect	Common Use
`left`	Moves element left	Image/text wrapping
`right`	Moves element right	Image/text wrapping
`none`	No floating	Default behavior
`inherit`	Inherits parent’s value	Specialized layouts