Skip to main content

Visit Mozilla.org

CSS:float

From MDC

« CSS Reference

[edit] Summary

The float property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

A floating element is one where the computed value of float is not none.

Note that if you're referring to this property from JavaScript as a member of the element.style object, you must spell it at cssFloat (see the list at DOM:CSS). Also note that IE spells this styleFloat.

[edit] Syntax

float: left | right | none | inherit

[edit] Values

  • left : The element floats on the left side of its containing block.
  • right : The element floats on the right side of its containing block.
  • none : The element does not float.

[edit] Examples

View Live Examples 

<html>
 <head>
  <style type="text/css">
   b
   {
     font-size: 25px;
     float:right;
   }
  </style>
 </head>
 <body>
 
  <p>
    <b>HELLO!</b>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
  </p>
 
</body>
</html>

[edit] Notes

TODO: should explain how floats are positioned. Mention block formatting context.

[edit] Specifications

[edit] Browser compatibility

Browser Lowest Version
Internet Explorer 4
Netscape 4
Opera 3.5

[edit] See also

clear, display, position

Retrieved from "http://developer.mozilla.org/en/docs/CSS:float"