clear

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

Syntax

CSS

clear: value;

JS

object.style.clear = "value";

Values

<'clear'> = none | left | right | both | inherit

none

No constraint on the box's position with respect to floats.

left

Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

right

Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

both

Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

inherit

Specifies the same value as the parent.

Initial

none

<!doctype html>
<html>
<head>
    <style>
        .clear
        {
            background-color: yellow;
        }
        .left
        {
            background-color: lightgray;
            float: left;
            height: 50px;
            width: 100px;
        }
        .right
        {
            background-color: lightgray;
            float: right;
            height: 100px;
            width: 50px;
        }
    </style>
    <script>
        function myfunction(myvar)
        {
            document.querySelector(".clear").style.clear = myvar;
        }
    </script>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">both</button>
    <button onmouseover="myfunction(innerHTML)">left</button>
    <button onmouseover="myfunction(innerHTML)">none</button>
    <button onmouseover="myfunction(innerHTML)">right</button><br>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear">clear</div>
</body>
</html>

JS

<!doctype html>
<html>
<head>
    <style>
        .clear
        {
            background-color: yellow;
        }
        .left
        {
            background-color: lightgray;
            float: left;
            height: 50px;
            width: 100px;
        }
        .right
        {
            background-color: lightgray;
            float: right;
            height: 100px;
            width: 50px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>both</button>
    <button>left</button>
    <button>none</button>
    <button>right</button><br>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear">clear</div>
    <script>
        var elements = document.querySelectorAll("button");
        for(let element of elements)
        {
            function myfunction()
            {
                var myvar = element.innerHTML;
                if(element.value)
                {
                    myvar = element.value;
                }
                document.querySelector(".clear").style.clear = myvar;
            }
            element.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

both

left

none

right

JS

JS

Links

Internal

External