From W3C Wiki
Jump to: navigation, search


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


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.


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


  width: 100px;
  height: 100px;
  float: left;
  background-color: red;
  background-color: blue;


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

Csslist2 float.png

CSS Reference

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