À 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
la source

Réponses:

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
la 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
la 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
la source