À quoi sert style = «clear: both»?

98

J'en ai vu un divqui avait du style clear:both! À quoi sert clearin style?

<div style="clear:both">

html css

— Thomasbabuj
source

249

clear:both fait tomber l'élément sous tous les éléments flottants qui le précèdent dans le document.

Vous pouvez également utiliser clear:leftou clear:rightpour le faire tomber en dessous uniquement des éléments qui ont été flottés à gauche ou à droite.

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

— RichieHindle
source

2

En outre, il permet au parent div pour s'adapter à la hauteur.

— Oleg

@Jason, le bogue auquel vous faites référence ne s'applique qu'à Internet Explorer 6 sous Windows XP. C'est une bonne chose que nous n'ayons pas besoin de le soutenir la plupart du temps ces jours-ci.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, oui, c'est vrai. Mon commentaire remonte à 2009, alors que c'était toujours applicable.

— Jason

20

Pour ajouter à la réponse de RichieHindle, consultez Floatutorial , qui vous explique comment le flottement et la compensation CSS fonctionnent.

— Paul Dixon
source

1

Le 15 février 2016, je n'ai pas pu me connecter au serveur pour Floatutorial (connexion refusée sur le port 80).

— dlu

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.

— imdad
source