CSS float Property
More "Try it Yourself" examples below.
Definition and Usage
The float property specifies whether or not a box (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 examples on the bottom of the 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 is not floated, and will be displayed just where it occurs in the text. This is default | Play it » |
left | The element floats to the left | Play it » |
right | The element floats the right | 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
Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.
Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.
Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.
Clear floats with clear
Elements after a floating element will flow around it. To avoid this, use the clear property.
Clear floats with the clearfix hack
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container, fix this problem with the "clearfix" hack.
Related Pages
CSS tutorial: CSS Float
HTML DOM reference: cssFloat property