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.

  • Initial valuenone
  • Applies toAll except for positioned elements and generated content
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.cssFloat
Formal syntax: [ left | right | top | bottom | start | end | none | <page-floats> ] && contour? 

float: [value];
  • leftThe left value indicates that the element must float to the far left side of its containing block.
  • rightThe right value indicates that the element must float to the far right side of its containing block.
  • topSame as 'left'
  • bottomsame as 'right'
  • startIf the 'direction' property is 'ltr', the same as 'left'; otherwise the same as 'right'.
  • endIf the 'direction' property is 'rtl', the same as 'right'; otherwise the same as 'left'.
  • noneIndicates that the element does not contain any float at all. This is the initial value of the float property.
.class {
   float: right;
}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox8+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.