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 img { float: left; }
.clear { clear: left; }
</style>
</head>
<body>
<div id="example">
<img src="image/photo.jpg" alt="Example" width="200" height="133">
<p>The text wraps to the right of the image.</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 image.
This is example text.
--- Clears the left float ---