This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

float

Summary

Elements which have the style float are floated horizontally. These elements can move as far to the left or right of the containing element. All elements after the floating element will flow around it, but elements before the floating element are not impacted. If several floating elements are placed after each other, they will float next to each other as long as there is room.

Overview table

Initial value
none
Applies to
all elements except absolutely positioned, replaced elements
Inherited
No
Media
visual
Computed value
as specified
Animatable
No

CSS Object Model Property
:

Syntax

  • float: footnote
  • float: left
  • float: none
  • 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 far left side of its containing block.
right
The right value indicates that the element must float to the far right side of its containing block.
footnote
The footnote value indicates that the element is moved to the footnote area and that a footnote call is put in its original location.

Examples

In this example, we create a simple layout containing a title, a logo (image) and some textual content. Notice the use of the clearfix class on the article element below.

<article class="clearfix">
  <img class="logo" src="/logo/wplogo_pillow_tan.png" alt="Web Platform Docs logo" />
  <h1>Web Platform Docs</h1>
  <p class="desc">Web Platform Docs is a community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Learn more about <a href="/docs/">Web Platform Docs</a>. To understand the <a href="/docs/css/properties/float"><code>float</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float#Clearing_floats"><code>clear</code></a> property.</p>
  </div>
</article>

View live example

The CSS for the above layout is described below. Notice the use of the floats.

/* Some CSS rules remove for brevity; please see the live URL for the complete example. */

.logo {
  float: left;
}

.desc {
  float: left;
  width: 60%;
}

View live example

Usage

 As float implicitly implies the use of the block layout, it modifies the computed value of the display values in some cases:
Specified valueComputed value
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
flexflex, but float has no effect on such elements
inline-flexinline-flex, but float has no effect on such elements
otherunchanged

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

Related specifications

CSS basic box model
Working Draft
CSS Level 2 (Revision 1)
Recommendation
CSS Level 1
Recommendation
CSS Generated Content for Paged Media Module
Working Draft

See also

Related articles

Box Model

Related pages

Attributions