CSS float Property

❮ Prev Next ❯

The float property defines in which side of the container the elements should be placed, thus allowing the text or other elements to wrap around it. The property has three values: none, left and right.

This property is directly related to the clear property which defines whether an element should be next to floating elements or it should be below them (clear).

The float property will be ignored if the elements are absolutely positioned (position: absolute).

Initial Value	none
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.cssFloat = "right";

Syntax

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

Example of the float property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float property example</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Result

In the following example, the image floats to left.

Example of using the float property to float an image:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float property example</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
none	Means that the element is not floated and it will be displayed where it comes in the text. this is the default value of this property.	Play it »
left	Means that the element floats to left.	Play it »
right	Means that the element floats to right.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.