float

This page has been flagged with the following issues:

High-level issues:

Content:

W3C Recommendation

Summary

Elements which get float applied with a value other than none are taken from the normal flow and get wrapped on the left or right side of the parent element. Other elements get wrapped around it.

Overview table

Initial value	`none`
Applies to	all elements; but absolutely positioned, replaced elements
Inherited	No
Media	visual
Computed value	as specified
Animatable	No
CSS Object Model Property

Syntax

float: none
float: left
float: right

Values

none: none indicates that the element does not contain any float at all. This is the initial value of the float property.

left: The left value indicates that the element must float to the left side of its containing block.

right: The right value indicates that the element must float to the right side of its containing block.

Examples

View live exampleFirst example

This example shows how the float attribute affects the flow of the text. The sphere image floats to the left of the text, and the cone floats to the right.

HTML

<img src="sphere.jpg" style="float: left;">
<img src="cone.jpg" style="float: right;">

View live example'Second example

Let's assume the following markup.

HTML

<div class="parent">
	<div class="floated"></div>
	<p>…</p>
</div>
<p>…</p>

The element with the class floated flows to the left of the page while the content within the <p>-element flows around the floated content.

CSS

.floated {
	float: left;
	width: 150px;
	height: 170px;
	margin-right: 20px;
}

Usage

As float implicitly implies the use of the block layout, it modifies the computed value of the display values in some cases:

Specified value	Computed value
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex, but float has no effect on such elements
inline-flex	inline-flex, but float has no effect on such elements
other	unchanged

Note: If you're referring to this property from JavaScript as a member of the element.style object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor").

Notes

Remarks

When using floats it's often necessary to clear the parent element. Check out the clear-property.
Objects following a floating object move in relation to the position of the floating object.
The floating object is moved left or right until it reaches the border, padding, or margin of another block-level object.

Syntax

float: left | right | none | inherit

Standards information

CSS 2.1, Section 5.5.25

Related specifications

Specification	Status	Related Changes
CSS basic box model	Working Draft
CSS Level 2 (Revision 1)	Recommendation	No change.
CSS Level 1	Recommendation	Initial definition.

Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic Support	1.0	1.0	4.0	7.0	1.0

Mobile

Feature	Android	BlackBerry	Chrome for mobile	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile
Basic Support	1.0	Supported (when?)	Supported (when?)	1.0	6.0	6.0	Supported (when?)	1.0

Search

float

How to Use

float

Summary

Overview table

Syntax

Values

Examples

Usage

Notes

Remarks

Syntax

Standards information

Related specifications

Compatibility

Desktop

Mobile

See also

Related articles

Box Model

Related pages (MSDN)