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 float property has three values: none, left and right.

The float property is ignored if 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

<!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>

Here, the image floats to left.

Example

<!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
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.
left Means that the element floats to left.
right Means that the element floats to right.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 4.0+ 12.0+ 1.0+ 1.0+ 7.0+



Related articles