What is the use of style="clear:both"?

css, html

Solution

`clear:both` makes the element drop below any floated elements that precede it in the document.

You can also use `clear:left` or `clear:right` to make it drop below only those elements that have been floated left or right.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

Problem

I happened to see a `div` which had the style `clear:both`! What is the use of `clear` in `style`? ``` <div style="clear:both"> ```

Original source