CSS - clear Property

Quiz

CSS clear property determines the flow of an element with respect to a preceding floating element. It determines whether the element should be displayed alongside the floating element or below it.

Syntax

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

Property Values

Value	Description
none	The element is not pushed below the left or right floating elements. Default
left	The element is pushed below the left floating element.
right	The element is pushed below the right floating element.
both	The element is pushed below both the left and right floating elements.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Clear Property

The following examples explain the clear property with different values.

Clear Property with None Value

To let an element be placed alongside a floating element, left floating or right floating, we use the none value. If space exists, the element will be placed adjacent to the floating element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .common {
         width: 150px;
         height: 100px;
         text-align: center;
      }

      .float-left {
         float: left;
         background-color: lightblue;
         margin-right: 10px;
      }

      .float-right {
         float: right;
         background-color: lightcoral;
      }

      .element {
         clear: none;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: None, it places the element 
      alongside the floating element if 
      space exists.
   </p>
   <div>
      <div class=" common float-left">
        Left Float
      </div>
      <div class="element">
         <p>
            See this element is placed alongside the left
            floating element due to the using of clear with
            none value.
         </p>
      </div>
   </div>
   <br/>
   <div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
            See this element is placed alongside
            the right floating element due to the
            using of clear with none value.
         </p>
      </div>
   </div>
</body>

</html>

Clear Property with Left Value

To let an element be placed below a left floating element, we use the left value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-left {
         width: 150px;
         height: 100px;
         text-align: center;
         float: left;
         background-color: lightblue;
      }

      .element {
         clear: left;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: Left, it places the element below the
      left floating element.
   </p>
   <div>
      <div class="common float-left">
        Left Float
      </div>
      <div class="element">
         <p>
            See this element is placed below the
            left floating element due to the using
            of clear with left value.
         </p>
      </div>
   </div>
   <br/>
</body>

</html>

Clear Property with Right Value

To let an element be placed below a right floating element, we use the right value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-right {
         width: 150px;
         height: 100px;
         text-align: center;
         float: right;
         background-color: lightcoral;
      }

      .element {
         clear: right;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: Right, it places the element below the
      right floating element.
   </p>
   <div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
            See this element is placed below the
            right floating element due to the using
            of clear with right value.
         </p>
      </div>
   </div>
   <br/>
</body>

</html>

Clear Property with Both Value

To let an element be placed below both the left and right floating elements, we use the both value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .common {
         width: 150px;
         height: 100px;
         text-align: center;
      }

      .float-left {
         float: left;
         background-color: lightblue;
         margin-right: 10px;
      }

      .float-right {
         float: right;
         background-color: lightcoral;
      }

      .element {
         clear: both;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: Both, it places the element below both
      the left and right floating elements.
   </p>
   <div>
      <div class=" common float-left">
        Left Float
      </div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
            See this element is placed below both
            the left and right floating elements
            due to the using of clear with both value.
         </p>
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
clear	1.0	5.0	1.0	1.0	6.0

css_reference.htm

Print Page