float

Jump to: navigation, search

float

This page has been flagged with the following issues:

Content:


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


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.

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

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]