HTML - DOM Style Object clear Property

HTML DOM Style Object clear property used to set or get the relative position of specific element with repect to floating objects.

Syntax

Set the clear property:

object.style.clear= "none | left | right | both | initial | inherit";

Get the clear property:

object.style.clear;

Property Values

Value	Description
none	It is the default value which allows floating on both sides of the element.
left	It does not allow floating objects on the left side of the element.
right	It does not allow floating objects on the right side of the element.
both	It does not allow floating objects on any side either left or right side of the element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents position of an element relative to floating objects.

Example of HTML DOM Style Object 'clear' Property

In this example We have two div elements floating on left and right sides of green and yellow color respectively and we have implemented 'left', 'right', 'both' and 'none' property values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object clear Property
    </title>
    <style>
        #first {
            background-color: #04af2f;
            height: 200px;
            width: 200px;
            float: left;
        }
        div {
            background-color: yellow;
            height: 200px;
            width: 200px;
            float: right;
        }
    </style>
</head>
<body>
    <button onclick="fun()">Left</button>
    <button onclick="funTwo()">Right</button>
    <button onclick="funThree()">Both</button>
    <button onclick="funFour()">None</button>
    <br><br>
    <div id="first"></div>
    <div></div>
    <p id="clear">
        This is a random text for example.
        Welcome to Tutorials Point
        Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Ducimus nostrum, recusandae,
        iusto voluptate, optio at tempore quaerat quis
        aut exercitationem labore mollitia. Culpa quidem
        dicta iste commodi quaerat fuga ullam!
    </p>
    <script>
        function fun() {
            document.getElementById("clear")
                .style.clear = "left";
        }
        function funTwo() {
            document.getElementById("clear")
                .style.clear = "right";
        }
        function funThree() {
            document.getElementById("clear")
                .style.clear = "both";
        }
        function funFour() {
            document.getElementById("clear")
                .style.clear = "None";
        }
    </script>
</body>
</html>

Supported Browsers

Property
clear	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page