CSS clear Property

The clear property is directly related to floats. The clear property defines that 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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      float: left;
      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>

See another example with the "left" value.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      float: right;
      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>

Example where the "both" value is applied.

Example

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

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.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which syntax means that the floating elements are not allowed on both the right and left sides?




Related articles