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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > clear (address, br, Hn, pre, ...)

clear property (address, br, Hn, pre, ...)

Browser support:

Specifies or returns the position of the element in relation to floating objects.

This property is deprecated. Use the clear style property instead.

Syntax:

object.clear;

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

This property is read/write.

HTML page for this property: clear

Possible values:

String that sets or retrieves the position in relation to floating objects.

One of the following values:

all

The element will be placed below any floating objects.

left

The element be placed below any floating objects on the left side.

none

Allows floating content on all sides.

right

The element will be placed below any floating objects on the right side.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the clear attribute:

<img width="100px" height="100px" src="picture.gif" align="right" />
<br clear="left"/>
<h3>This text should be placed on the left side of the image.</h3>

<br/><br/><br/>

<img width="100px" height="100px" src="picture.gif" align="right" />
<br clear="right"/>
<h3>This text should be placed below the image.</h3>

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:

<head>
    <script type="text/javascript">
        function ChangeClear (selectTag) {
            var br = document.getElementById ("lineBreak");
            br.clear = selectTag.value;
        }
    </script>
</head>
<body>
    <img width="100px" height="100px" src="picture.gif" align="right" />
    <br id="lineBreak" clear="all"/>
    <h3>Some text after the line break.</h3>

    <br /><br />
    Change the clear attribute of the line break.
    <div align="center">
        <select onchange="ChangeClear (this);" size="4">
            <option value="all" selected="selected" />all
            <option value="left" />left
            <option value="right" />right
            <option value="none" />none
        </select>
    </div>
</body>