Clear

The clear property can be attached to block level objects to render them in a single-line box. No content (including the floating objects) is added on the left side or on the right side. The possible values are
PropertiesDescription
none
leftthe left side of the element will be cleared
rightthe right side of the element will be cleared
boththe both sides of the elements will be cleared
Example
<h2>heading<h2>
snippet
<h2 style="clear: left;">heading 2</h2>
Note
Note
The top edge of the <h2> box is moved below the bottom edge of the <ol> box The right side of the <h2> element is not yet cleared The 'clear' property can be attached to a floating object to render it on a single line.
snippet
<html>
<head>
    <style>
        span{border:1px solid #000000}
    </style>
</head>
<body>
    Without Clear
    <div>
        <img url="star.png" style="float:left"> <span>span text1</span>
        <img url="star.png" style="float:right"> <span>span text2</span>
        <span>span text3</span>
    </div>
    Clear floating objects
    <div>
        <img url="star.png" style="float:left"> <span style="clear:left">span text1</span>
        <img url="star.png" style="float:right"> <span style="clear:right">span text2</span>
        <img url="star.png" style="float:left"> <img url="star.png" style="float:right">
        <span> style="clear: both">span text3</span>
    </div>
</body>
</html>
Related Tutorial
4 Float
6 Clear

Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #