Quelle est l'utilité de style="clear:both" ?

Question

J'ai vu par hasard un div qui avait le style clear:both ! Quelle est l'utilité de clear en style ?

<div style="clear:both">

Answer 1

clear:both fait passer l'élément en dessous de tous les éléments flottants qui le précèdent dans le document.

Vous pouvez également utiliser clear:left o clear:right pour qu'il ne descende que sous les éléments qui ont été déplacés vers la gauche ou la droite.

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

Answer 2

Juste pour ajouter à la réponse de RichieHindle, consultez Tutoriel sur les flotteurs qui vous explique le fonctionnement du flottant et de l'effacement CSS.

Answer 3

Lorsque vous utilisez float sans largeur, il reste de l'espace dans cette ligne. Pour bloquer cet espace, vous pouvez utiliser clear:both; dans l'élément suivant.