CSSfloat Property
More "Try it Yourself" examples below.
Definition and Usage
Thefloat property specifies whether an element should float to the left, right, or not at all.
Note: Absolutely positioned elements ignore thefloat property!
Note: Elements next to a floating element will flow around it. To avoid this, use theclear property or the clearfix hack (see example at the bottom of this page).
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| 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
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 aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Example
Let image be displayed just where it occurs in the text (float: none):
float: none;
}
Example
Let the first letter of a paragraph float to the left and style the letter:
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Example
Use float with a list of hyperlinks to create a horizontal menu:
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%;}
Example
Use float to create a homepage with a header, footer, left content and main content:
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%;}
Example
Do not allow floating elements on the left or the right side of a specified <p> element:
float: left;
}
p.clear {
clear: both;
}
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":
content: "";
clear: both;
display: table;
}
Related Pages
CSS tutorial:CSS Float
HTML DOM reference:cssFloat property
