The clear property is used to stop text wrapping around the box.
.example {
clear: both;
}
| Property | Value | Explanation |
|---|---|---|
| clear | left | clears the left (for left floating box) |
| right | clears the right (for right floating box) | |
| both | clears the both (for left or right floating box) | |
| none | it doesn't clear (default) |
Apply this style to the block-level element.
<html> <head> <title>TAG index</title> <style type="text/css"> #example { width: 100%; } #example iframe { width: 200px; height: 150px; float: left; } .clear { clear: left; } </style> </head> <body> <div id="example"> <iframe src="example.html">Alternate content</iframe> <p>The text wraps to the right of the iframe.</p> <p>This is example text.</p> <p class="clear">--- Clears the left float ---</p> </div> </body> </html>
The text wraps to the right of the iframe.
This is example text.
--- Clears the left float ---