CSS clear Property

❮ Prev Next ❯

The clear property is directly related to floats. The clear property is used to specify whether an element should be next to floating elements or it should be below them (clear).

We can apply the clear property to both floating and non-floating elements. This property has four values: none, left, right, and both. "None" is the default value. It allows floating elements on both sides. "Left" value does not allow any floating element on the left side. "Right" value does not allow any floating element on the right side. "Both" value does not allow any floating element on either left or right side.

Initial Value	none
Applies to	Block-level elements.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.clear = "both";

Syntax

clear: none | left | right | both | initial | inherit;

Example of the clear property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc
      }
      .clear {
        clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
    <p class="clear">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

Example of the clear property with the "left" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc
      }
      .clear {
        clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
    <p class="clear">
      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 »

Example of the clear property with the "both" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #CCC;
      }
      p.clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="clear">
      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
none	Allows floating elements on both sides. It is the default value of this property.
left	Means that the floating elements are not allowed on the left side.
right	Means that the floating elements are not allowed on the right side.
both	Means that the floating elements are not allowed on the both right and left sides.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.