CSS: float property

This CSS tutorial explains how to use the CSS property called float with syntax and examples.

Description

The CSS float property defines that an element should be taken out of the normal flow of the document and placed along the left or right side of its containing block. Text and inline elements will then wrap around this element.

Syntax

The syntax for the float CSS property is:

float: value;

Parameters or Arguments

value

The location of where the element will float. It can be one of the following:

Value	Description
left	Element will float on the left side of the containing block div { float: left; }
right	Element will float on the right side of the containing block div { float: right; }
none	Element will not float div { float: none; }
inherit	Element will inherit the float from its parent element div { float: inherit; }

Note

• When an element is floated, it is placed to the left or right until it touches either the edge of its containing block or another floated element.
• Text and inline elements will wrap around the floated element.
• See the CSS clear property to learn how to clear floats.

Browser Compatibility

The CSS float property has basic support with the following browsers:

• Chrome
• Android
• Firefox (Gecko)
• Firefox Mobile (Gecko)
• Internet Explorer (IE)
• IE Phone
• Opera
• Opera Mobile
• Safari (WebKit)
• Safari Mobile

Example

We will discuss the float property below, exploring examples of how to use this property in CSS.

Using Left

Let's look at a CSS float example where we have floated an element to the left.

div { float: left; }

In this CSS float example, we have set the <div> tag to float to the left.

Using Right

Let's look at a CSS float example where we have floated an element to the right.

div { float: right; }

In this CSS float example, we have set the <div> tag to float to the right.