CSS/Properties/float

From W3C Wiki
< CSS‎ | Properties
Revision as of 18:10, 16 June 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

float

The float property specifies whether a box should float to the left, right, or not at all.

Description

Values left | right | none | inherit
Initial value none
Applies to All element
Inherited No


Point, Note

  • It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.


Values

  • left
    The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top.


  • right
    Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.


  • none
    The box is not floated.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

p{
  width: 100px;
  height: 100px;
  float: left;
}
p#red{
  background-color: red;
}
p#blue{
  background-color: blue;
}

[index.html]

<body>
  <p id="red">This is a paragraph</p>
  <p id="blue">This is a paragraph</p>
</body>

Csslist2 float.png

CSS Reference

The CSS specification defines the float property in 9.5.1 Positioning the float.