Control Floating Elements with clear
The clear property specifies whether the element can be floated next to another floating element.
The allowed values of the clear element:
| Value | Description |
|---|---|
| left | The left edge of the element may not float next to another floating element. |
| right | The right edge of the element may not float next to another floating element. |
| both | Neither edge may float next to another floating element. |
| none | The element is not cleared. |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p.toggle {
float:left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
p.cleared {
clear:left;
}
</style>
</head>
<body>
<p class="toggle">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p class="toggle cleared">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>