Javascript DOM CSS Style clear Property

Introduction

Prohibit floating objects on the left side of the text in a <p> element:

document.getElementById("myP").style.clear = "left";

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
img {/*  w w w  .  ja  va  2s  .c  om*/
  float: left;
}
</style>
</head>
<body>

<img src="image1.png" width="100" height="132">

<p id="myP">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>

<button type="button" onclick="myFunction()">Clear left side of text</button>

<script>
function myFunction() {
  document.getElementById("myP").style.clear = "left";
}
</script>

</body>
</html>

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

Property Values

Value	Description
none	Allows floating objects on both sides of the element. `default`
left	No floating objects allowed on the left side of the element
right	No floating objects allowed on the right side of the element
both	No floating objects allowed on either the left or right side of the element
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The clear property returns a String representing the position of an element relative to floating objects.

Previous Next