clears float


clear: ***;

Browser
Internet Explorer Firefox Opera

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)
Tips and Notes

Apply this style to the block-level element.


Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example {
width: 100%;
}

table, td, th {
border: 2px #2b2b2b solid;
}
table {
width: 200px;
float: left;
}

.clear {
clear: left;
}

</style>

</head>
<body>

<div id="example">

<table>
<tr>
<th>Heading A</th>
<th>Heading B</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
</tr>
<tr>
<td>Cell G</td>
<td>Cell H</td>
</tr>
</table>

<p>The text wraps to the right of the table.</p>
<p>This is example text.</p>
<p class="clear">--- Clears the left float ---</p>

</div>

</body>
</html>
Output
Heading A Heading B
Cell A Cell B
Cell C Cell D
Cell E Cell F
Cell G Cell H

The text wraps to the right of the table.

This is example text.

--- Clears the left float ---