clear: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

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 ---