clear property

Specifies whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.

CSS 2.1, Section 9.5.2

 

Syntax

clear: none | left | right | both

Property values

none

Initial value. 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 Toblock-level elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

The value of this property lists the sides where floating objects are not accepted.

Examples

The following examples use the clear CSS property and the clear scripting property to specify placement of text relative to floating objects.

This example uses a call to an embedded (global) style sheet to move elements with the class "clearme" below the floating objects.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/clear_h.htm

HTML
Copy 

<style>
.clearme {
  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

HTML
Copy 

<head>
<script type="text/javascript">
function fnClear(){
  oClear.style.clear="left";
}
function fnClear2(){
  oClear.style.clear="";
}
</script>
</head>

<body>
  <img alt="sphere" src="../graphics/sphere.jpg" style="float: left">
  <div id="oClear">
    <p>This is an example of the clear property.</p>
  </div>
  <p>
    <input type="button" value="clear = left" onclick="fnClear()"> 
    <input type="button" value="clear = none" onclick="fnClear2()">
  </p>
</body>

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style

 

 

Show: