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 ❯
none |
no |
no. Read about animatable |
CSS1 |
object.style.cssFloat="left" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS Syntax
float: none|left|right|initial|inherit;
Property Values
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 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
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
The CSS float
property specifies how an element should float.
The CSS clear
property specifies what elements can float beside the cleared element and on which side.
The float Property
The float
property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float
property can have one of the following values:
-
left
- The element floats to the left of its container -
right
- The element floats to the right of its container -
none
- The element does not float [will be displayed just where it occurs in the text]. This is default -
inherit
- The element inherits the float value of its parent
In its simplest use, the float
property can be used to wrap text around images.
Example - float: right;
The following example specifies that an image should float to the right in a text:
Example - float: left;
The following example specifies that an image should float to the left in a text:
Example - No float
In the following example the image will be displayed just where it occurs in the text [float: none;]:
Example - Float Next To Each Other
Normally div elements will be displayed on top of each other. However, if we use float: left
we can let elements float next to each other:
Example
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
Try it Yourself »