clear: ***;
Browser |
|
---|
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) |
Example
<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>
- Output
-
The text wraps to the right of the iframe.
This is example text.
--- Clears the left float ---