clear property

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

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


<h2 style="clear: left;">heading 2</h2>

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.

span{border:1px solid #000000}
Without Clear
<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>
Clear floating objects
<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>
Related Tutorial
3. display