CSS clear

The CSS clear property is used to make an element avoid floating around floated element(s). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{float: right; background-color: purple; color: white; padding: 12px;}
      .b{background-color: green; color: white; padding: 12px;}

      .c{float: right; background-color: purple; color: white; padding: 12px;}
      .d{clear: right; background-color: green; color: white; padding: 12px;}
   </style>
</head>
<body>

   <div class="a">float: right</div>
   <div class="b">Without clear Property</div>

   <br/>

   <div class="c">float: right</div>
   <div class="d">With clear Property</div>

</body>
</html>

Output

float: right

Without clear Property

float: right

With clear Property

Note - The float property defines where the element should float.

CSS clear Syntax

The syntax of clear property in CSS, is:

clear: x;

The value of x should be any of the following:

left - Used to move an element below the left floated elements (element with float: left property defined to it)
right - Used to move an element below the right floated elements
both - Used to move an element below the left and right floated elements
none - Used not to apply the clear property. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS clear Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .c, .e, .f{background-color: purple; color: white; padding: 12px;}
      .b, .d, .g{background-color: green; color: white; padding: 12px;}

      .a{float: left;}
      .b{clear: left;}
      .c{float: right;}
      .d{clear: right;}
      .e{float: left;}
      .f{float: right;}
      .g{clear: both;}
   </style>
</head>
<body>

   <div class="a">Left floated element</div>
   <div class="b">With clear: left</div>
   <br/>
   <div class="c">Right floated element</div>
   <div class="d">With clear: right</div>
   <br/>
   <div class="e">Left floated element</div>
   <div class="f">Right floated element</div>
   <div class="g">With clear: both</div>

</body>
</html>

Output

Left floated element

With clear: left

Right floated element

With clear: right

Left floated element

Right floated element

With clear: both

CSS Online Test

« Previous Tutorial Next Tutorial »