CSS float Property

Example

Let an image float to the right:

img {
float: right;
}

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).

Default value:	none
Inherited:	no
Animatable:	no.
Version:	CSS1
JavaScript syntax:	object.style.cssFloat="left"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which float is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

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	Demo
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.
inherit	Inherits this property from its parent element.

More Examples

Example

Let an image float to the left:

img {
float: left;
}

Example

Let image be displayed just where it occurs in the text (float: none):

img {
float: none;
}

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:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #0054ff;
}

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%;}

Example

Do not allow floating elements on the left or the right side of a specified <p> element:

img {
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":

.clearfix::after {
content: "";
clear: both;
display: table;
}