CSS float Property
More "Try it Yourself" examples below.
Definition and Usage
The float property specifies how an element should float.
Note: Absolutely positioned elements ignores the float property!
Note: Elements after 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).
| 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 | Play it |
|---|---|---|
| none | The element does not float, (will be displayed just where it occurs in the text). This is default | Play it » |
| left | The element floats to the left of its container | Play it » |
| right | The element floats the right of its container | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
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
