In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > clear

clear style property

Browser support:

Specifies or returns the position of the element relative to floating objects.

Syntax:

object.clear;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: clear

Possible values:

The type of this property is string.

One of the following values:

both

Prohibits to show floating objects on any side of the object.

left

Prohibits to show floating objects on the left side of the object.

none

Default. Allows to show floating objects on both sides of the object.

right

Prohibits to show floating objects on the right side of the object.

Default: none.

Example HTML code 1:

This example illustrates the use of the clear property:

<head>
    <style>
        .floating {
            float: left;
            background: cyan;
            height: 30px;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
    <i class="floating">Floating element</i>
    <div class="clear">
        This sentence forbids floating elements on the left side.
    </div>

    <br /><br />
    
    <i class="floating">Floating element</i>
    <div>
        This sentence does not forbid floating elements on the left side.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the clear property in JavaScript:

<head>
    <style>
        .floating {
            float: left;
            background: cyan;
            height: 50px;
        }
        .clear {
            clear: left;
        }
    </style>

    <script type="text/javascript">
        function ChangeFloating (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var floatTest = document.getElementById ("floatTest");

            if ('cssFloat' in floatTest.style) {
                floatTest.style.cssFloat = selectState;
            }
            else {
                floatTest.style.styleFloat = selectState;
            }
        }

        function ChangeClear (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var clearTest = document.getElementById ("clearTest");
            clearTest.style.clear = selectState;
        }
    </script>
</head>
<body>
    <i id="floatTest" class="floating">Floating element</i>
    <div id="clearTest" class="clear">Change the relation of this sentence and the floating element with the drop-down list.</div>

    <br />
    <table cellpadding="5px">
        <thead>
            <th>Floating style</th>
            <th>Clear type of the sentence</th>
        </thead>
        <tbody>
            <tr>
                <td align="center" valign="top">
                    <select onchange="ChangeFloating (this);" size="3">
                        <option />none
                        <option selected="selected"/>left
                        <option />right
                    </select>
                </td>
                <td align="center" valign="top">
                    <select onchange="ChangeClear (this);" size="4">
                        <option />both
                        <option selected="selected"/>left
                        <option />right
                        <option />none
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>