clear - HTML CSS CSS Property

HTML CSS examples for CSS Property:clear

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. clear

Description

The clear CSS property moves other floating elements to the next line.

The following table summarizes clear Property.

Item Value
Default value: none
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


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

Property Values

The following table describes the values of this property.

Value Description
leftclear left floats.
right clear right floats.
bothclear both left and right floats.
autoDoesn't clear any floated elements. This is default.
initial Sets this property to its default value.
inherit take the value of its parent element clear property.

The example below shows the clear property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS clear property</title>
  <style type="text/css">
    .clearfix:after {<!--from  w w w.j a v  a  2 s  .  c  om-->
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    div {
      width: 500px;
      background: yellow;
      border: 1px solid #000000;
    }
    div p {
      width: 150px;
      margin: 10px;
      padding: 50px 0;
      text-align: center;
    }
    p.red {
      float: left;
      background: #ff0000;
    }
    p.green {
      float: right;
      background: #00ff00;
    }
    </style>
 </head>
 <body>
  <div class="clearfix">
   <p class="red">Float Left</p>
   <p class="green">Float Right</p>
  </div>
 </body>
</html>

Related Tutorials