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%; } 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>
| 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 ---