float property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The floated element is removed from the normal flow of the document.
Note: Elements after a floating element will flow around it. To avoid this, use the clear property (see examples below).
|Applies to||all elements|
|Computed value||as specified|
|Animatable||no See animatable properties.|
The following example shows how to use
Float an image to left:
Float an image to right:
Clearing floats (Use clear property to force an item to move below a floated element):
If a floating element is taller than it's containing element, it will overflow outside its container. Use "clearfix hack" to fix this:
It is common to make entire web layouts using the float property:
Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. Use clear property to force an item to move below a floated element.
The numbers in the table specify the first browser version that fully supports the
The following table describes the values of
|none||The element must not float (This is default)|
|left||The element must float on the left side of its containing block|
|right||The element must float on the right side of its containing block|
|initial||Sets this property to its default value|
|inherit||Inherits this property from its parent element|
CSS Floating elements tutorial