clear

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value None
Inherited No
Applied To block and float elements
HTML analog <br clear=left | right | all>
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Description
With the help of this parameter it is possible to determine an element side which is obligated to wrap around by other elements. The «clear» can cancel element wrapping which was determined by the parameter «float».

Syntax

clear: both | left | none | right

Arguments
both
It cancels element wrapping on both sides. It is recommended to install when you do not know exactly which element should be cancelled.
left
It cancels left border wrapping of an element. In this case all elements on this side will be put down and locate under a current element.
right
It cancels right side wrapping of an element.
none
Element wrapping occurs with the help of the parameter «float» or other ones.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>clear</title>
  <style type="text/css">
   #layer {
    float: left; /* Right edge flow of the block */
    background: #fd0; /* Background color */
    border: 1px solid black; /* Frame parameters */
    padding: 10px; /* Areas around the text */
    width: 40%; /* Block width */
   }
  </style>
 </head> 
 <body>
 
  <div id="layer">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 
  <div style="clear: left"></div>
 
  <p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, 
  vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
  odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore 
  te feugat nulla facilisi.</p> 
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.clear