CSS float property

Definition and usage

The float property defines the direction in which an element floats. In the past, this property was always applied to images, causing text to wrap around the image, but in CSS, any element can float. Floating elements generate a block-level box, regardless of what type of element it is.

If floating a non-replaced element, specify a clear width; otherwise, they will be as narrow as possible.

Note:If there is only a little space available above a line for the floating element, then this element will jump to the next line, and this process will continue until a line has enough space.

See also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:cssFloat property

Example

Float the image to the right:

img
  {
  float:right;
  

Try it yourself

CSS syntax

float: none|left|right|initial|inherit;

Attribute value

Value Description
left The element floats to the left.
right The element floats to the right.
none Default value. The element does not float and is displayed at the position where it appears in the text.
inherit Specifies that the value of the float property should be inherited from the parent element.

Technical details

Default value: none
Inheritance: no
Version: CSS1
JavaScript syntax: object.style.cssFloat="left"

Try It Yourself example

Simple application of the float property
Float an image to the right of a paragraph.
Float an image with borders and margins to the right of the paragraph
Float an image to the right of the paragraph. Add borders and margins to the image.
Image with a title floats to the right
Float an image with a title to the right
Float the first letter of the paragraph to the left
Float the first letter of the paragraph to the left and add styles to this letter.
Create a horizontal menu
Create a horizontal menu using floating with one-column hyperlinks.
Create a homepage without a table
Use floating to create a homepage with a header, footer, left catalog, and main content.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0