Easy Tutorial
❮ Jsref Push Jsref Abs ❯

clear Property


Definition and Usage

The clear property sets or returns the position of the element relative to floating objects.

Syntax

Set the clear property:

Return the clear property:

Value Description
none Default. Allows floating objects on both sides of the element.
left Does not allow floating objects on the left side of the element.
right Does not allow floating objects on the right side of the element.
both Does not allow floating objects on either the left or right side of the element.
inherit The value of the clear property should be inherited from the parent element.

Browser Support

All major browsers support the clear property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires !DOCTYPE to support "inherit". IE9 supports "inherit".


Example

Do not allow floating objects on the left side of the text:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
img {
    float:left;
}
</style>
<script>
function displayResult(){
    document.getElementById("p1").style.clear="left";
}
</script>
</head>
<body>
    
<img decoding="async" loading="lazy" src="w3javascript.gif" width="100" height="132">
<p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<input type="button" onclick="displayResult()" value="Float text to the left">

</body>
</html>

❮ Jsref Push Jsref Abs ❯