CSS float Property

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>

Result

CSS float Property

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>

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.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Practice Your Knowledge

What is the purpose of the 'float' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?