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 |
CSS Syntax
float: none|left|right|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | The element does not float, (will be displayed just where it occurs in the text). This is default |
| left | The element floats to the left of its container |
| right | The element floats the right of its container |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
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%;
}
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%;}
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%;}
