clear

Overview

W3C

Properties

background

background-attachment

The clear property specifies which sides of an element's box(es) may not be adjacent to an earlier floating box.


                                clear: none | left | right | both | inherit

Initial:	none
Applies To:	block-level elements
Inherited:	no
Percentages:	NA
Media:	visual

Values
DOM
Example | Values | both
Example | Values | left
Example | Values | none
Example | Values | right
Example | DOM
References


                                clear: value;


Value:	Description:
both	Clears earlier left-floating and right-floating boxes
inherit	Takes the same computed value as the property for the element's parent
left	Clears earlier left-floating boxes
none	No constraint with respect to float
right	Clears earlier right-floating boxes


                                [window.]document.getElementById("element-id").style.clear = "clear";

<html>
  <head>
    <title>clear</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">none</a>
    <a href="/" onmouseover="mouseover2();">left</a>
    <a href="/" onmouseover="mouseover3();">right</a>
    <a href="/" onmouseover="mouseover4();">both</a><br>
    <div id="id1">
      <p id="id2">float</p>
      <p id="id3">float</p>
    </div>
    <div id="id4">
      <p id="id5">float</p>
      <p id="id6">float</p>
    </div>
    <p id="id7">main</p>
    <div id="id8"></div>
    <p id="id9">footer</p>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id8").style.clear = "none";
    }
    function mouseover2() {
      document.getElementById("id8").style.clear = "left";
    }
    function mouseover3() {
      document.getElementById("id8").style.clear = "right";
    }
    function mouseover4() {
      document.getElementById("id8").style.clear = "both";
    }
    document.getElementById("id1").style.cssFloat   = "left";
    document.getElementById("id1").style.styleFloat = "left";
    document.getElementById("id4").style.cssFloat   = "right";
    document.getElementById("id4").style.styleFloat = "right";
    document.getElementById("id2").style.margin = "0";
    document.getElementById("id3").style.margin = "0";
    document.getElementById("id5").style.margin = "0";
    document.getElementById("id6").style.margin = "0";
    document.getElementById("id7").style.margin = "0";
    document.getElementById("id9").style.margin = "0";
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | both

Example | Values | left

Example | Values | none

Example | Values | right

Example | DOM

References