CSS2 » Properties » clear

Version: Level 1

Compability: IE4+  N4+

Syntax:

clear : none | left | right | both

both

The both value requires that a floating element must be placed below all previous elements.

right

The right value requires that a floating element must be placed lower than the previously occurring element on the right side.

left

The left value requires that a floating element must be placed lower than the previously occurring element on the left side.

none

The none value places no restriction on where the element can appear in the text.

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. This property is not inherited.

Examples

Code:

p.one { clear: left; }
p.two { clear: right; }
img { float: right; }
...
<img src="/images.guru.gif">
<p class="one">
<b>
First text appears to the left of the Guru image since itis only required to be below the previous element on the leftside (which is "Output:") and the Guru is on the right side.Yet in the flow of the code, this text actually occurs afterthe Guru image.
</b>
</p>
<p class="two">
<b>
Second text appears completely below the Guru image sinceit is required to be below the previous element on the rightside which is the Guru.
</b>
</p>


Output:

First text appears to the left of the Guruimage since it is only required to be below the previouselement on the left side (which is "Output:") and the Guruis on the right side. Yet in the flow of the code, thistext actually occurs after the Guru image.

Second text appears completely below the Guruimage since it is required to be below the previous elementon the right side which is the Guru.

Language(s): CSS2

See Also:

• float
• height
• width