CSS

float

Property

Example

Let an image float to the right:

img 
{
 
float: right;
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The float property specifies whether an
element should float to the left, right, or not at all.

Note: Absolutely positioned elements ignore the float property!

Note: Elements next to a floating element will flow around it. To avoid this, use the
clear property or the clearfix hack (see example
at the bottom of this page).

Show demo ❯

Default value:
none

Inherited:
no

Animatable:
no. Read about animatable

Version:
CSS1

JavaScript syntax:
object.style.cssFloat=”left”
Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property

float
1.0
4.0
1.0
1.0
7.0

CSS Syntax

float: none|left|right|initial|inherit;

Property Values

Value
Description
Demo

none
The element does not float, (will be displayed just where it occurs in the text). This is default
Demo ❯

left
The element floats to the left of its container
Demo ❯

right
The element floats the right of its container
Demo ❯

initial
Sets this property to its default value. Read about initial

inherit
Inherits this property from its parent element. Read about inherit

More Examples

Example

Let an image float to the left:

img 
{
 
float: left;
}

Try it Yourself »

Example

Let image be displayed just where it occurs in the text (float: none):

img 
{
 
float: none;
}

Try it Yourself »

Example

Let the first letter of a paragraph float to the left and style the letter:

span {
  float: left;
  width:
0.7em;
  font-size: 400%;
 
font-family: algerian, courier;
  line-height: 80%;
}

Try it Yourself »

Example

Use float with a list of hyperlinks to create a horizontal menu:

.header, .footer {
  background-color: grey;
 
color: white;
  padding: 15px;
}

.column {
  float: left;
 
padding: 15px;
}

.clearfix::after {
  content: “”;
 
clear: both;
  display: table;
}

.menu {width: 25%;}
.content {width: 75%;}

Try it Yourself »

Example

Use float to create a homepage with a header, footer, left content and main content:

.header, .footer {
  background-color: grey;
 
color: white;
  padding: 15px;
}

.column {
  float: left;
 
padding: 15px;
}

.clearfix::after {
  content: “”;
  clear: both;
  display: table;
}

.menu {width: 25%;}
.content {width: 75%;}

Try it Yourself »

Example

Do not allow floating elements on the left or the right side of a specified
<p> element:

img {
  float: left;
}

p.clear {
 
clear: both;
}

Try it Yourself »

Example

If a floating element is taller than the containing element, it will overflow outside its container.
It is possible to fix this with the “clearfix hack”:

.clearfix::after {
  content: “”;
 
clear: both;
  display: table;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Float

HTML DOM reference:
cssFloat property