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:

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 »


Liked this post? Share it!