clear property
[This documentation is preliminary and is subject to change.]
Sets or retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.
 |
Syntax
clear: none | left | right | both
Property values
none-
Default. Floating objects are allowed on both sides.
left-
Object is moved below any floating object on the left side.
right-
Object is moved below any floating object on the right side.
both-
Object is moved below any floating object.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Standards information
- CSS 2.1, Section 5.5.26
- Document Object Model (DOM) Level 1 Specification, Section 2.5.5
Remarks
The value of this property lists the sides where floating objects are not accepted.
Examples
The following examples use the clear attribute and the clear property to specify placement of text relative to floating objects.
This example uses a call to an embedded (global) style sheet to move the text below the floating objects when italic text is encountered.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/clear_h.htm
<STYLE>
I { clear:left }
</STYLE>
This example changes the position of the paragraph relative to the floating object on its left side.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/clear_s.htm
<HEAD>
<SCRIPT>
function fnClear(){
oClear.style.clear="left";
}
function fnClear2(){
oClear.style.clear="none";
}
</SCRIPT>
</HEAD>
<BODY>
<img src="/workshop/graphics/sphere.jpg" style="float:left">
<SPAN ID="oClear">
<P>This is an example of the clear attribute.<P>
</span>
<P>
<INPUT TYPE=button value="clear = left" onclick="fnClear()">
<INPUT TYPE=button value="clear = none" onclick="fnClear2()">
</P>
</BODY>
Build date: 3/14/2012
