PROPERTY: clear
clear : none | left | right | both
 
Compatibility:  IE4+  N4+
Version: Level 1
Inherited: No
 
The clear property sets restrictions on where a floating element can be place with respect to previously placed element. It should only be applied to block-level elements.
 
none
 
The none value places no restriction on where the element can appear in the text.
 
left
 
The left value requires that a floating element must be placed lower than the previously occurring element on the left side.
 
right
 
The right value requires that a floating element must be placed lower than the previously occurring element on the right side.
 
both
 
The both value requires that a floating element must be placed below all previous elements.
 
Code:
a { clear: none; }
b { clear: left; }
li { clear: right; }
p { clear: both; }
 
or
 
p.one { clear: left; }
p.two { clear: right; }
img { float: right; }
...
<img src="/images.guru.gif">
<b class="one">
First text appears to the left of the Guru image since it is only required to be below the previous element on the left side (which is "Output:") and the Guru is on the right side. Yet in the flow of the code, this text actually occurs after the Guru image.
</b>
<b class="two">
Second text appears completely below the Guru image since it is required to be below the previous element on the right side which is the Guru.
</b>

 
Output:
First text appears to the left of the Guru image since it is only required to be below the previous element on the left side (which is "Output:") and the Guru is on the right side. Yet in the flow of the code, this text actually occurs after the Guru image. Second text appears completely below the Guru image since it is required to be below the previous element on the right side which is the Guru.

Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information