Clear

In this chapter we will learn how to use the 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 clear property to both floating and non-floating elements.

CSS Syntax

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

Let's see an example:

We will see an example with floats and has a problem with footer because it is not cleared and it is placed at the wrong area:



As it is not preferred to have a footer at that area, we must use "clear" property to take it to its place, here the result when we use "clear: both" :



Let's see another example:

<!DOCTYPE html>
<html>
   <head>
       <style>
           img {float: right;}
           .clear { clear: left;}
      </style>
   </head>
   <body>

           <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="100">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. </p>
          <p class="clear">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. </p>

   </body>
</html>

Here is the result:




In this example, we used an image which is floating at the right and we made the text "clear:left" to get this result.

Property Values

Value Descriptions
none It allow floating elements on both sides. It is the default value of this property.
left It means that the floating elements are not allowed on the left side.
right It means that the floating elements are not allowed on the right side.
both It means that the floating elements are not allowed on the both right and left sides.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.