< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Recommendation


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


  • float: footnote
  • float: left
  • float: none
  • float: right


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

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

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

The footnote value indicates that the element is moved to the footnote area and that a footnote call is put in its original location.


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="http://www.webplatform.org/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="http://docs.webplatform.org">Web Platform Docs</a>. To understand the <a href="http://docs.webplatform.org/wiki/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>

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


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



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


float: left | right | none | inherit

Standards information

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.
CSS Generated Content for Paged Media Module Working Draft Addition of the footnote value.

See also

Related articles

Box Model

  • float

Related pages (MSDN)


This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]