- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style clear Property
The HTML DOM clear property is used for getting or setting the position of a floating element. It is used to specify whether an element should be moved below another floating element or not.
Following is the syntax for −
Setting the clear property −
object.style.clear='none|left|right|both|initial|inherit'
The above properties are explained as follows −
Value | Description |
---|---|
left | Elements are not floated on the left side. |
right | Elements are not floated on the right side |
both | Elements are not floated on neither left nor right side. |
none | Elements are floated on both sides and this is the default value. |
inherit | To inherit the parent property value |
Let us look at an example for the clear property −
Example
<!DOCTYPE html> <html> <head> <style> img { margin: 5px; float: right; clear: both; border: 2px solid orange; } #DIV1{ clear:left; } </style> <script> function changeClear(){ document.getElementById("DIV1").style.clear="right"; document.getElementById("Sample").innerHTML="The div clear property is changed to right from left "; } </script> </head> <body> <img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg"> <div id="DIV1">This is sample text inside div. This is another line inside the div.Here is a div containing some random english text. This div is created to demonstrate clear property </div> <p>Change the above div clear property by clicking the below button</p> <button onclick="changeClear()">Change Clear</button> <p id="Sample"></p> </body> </html>
Output
On clicking the “Change Clear” button −
Advertisements