float

< css‎ | properties
Jump to: navigation, search

float

This article is Ready to Use.


W3C Recommendation

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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
1.0
Yes
4.0
Yes
7.0
Yes
1.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
1.0
Yes
1.0
Yes
6.0
Yes
6.0
Yes
1.0
Yes


Examples

View live exampleIn 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.

HTML

<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>
  </div>
</article>

View live exampleThe CSS for the above layout is described below. Notice the use of the floats.

CSS

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

.logo {
  float: left;
}

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

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

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)

Attribution

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]