La propriété la plus imprévisible
float, une mer infinie de possibilités (et de comportements déplacés).float est probablement le concept CSS le plus difficile à saisir. Son comportement peut être intriguant, inattendu et magique. Probablement parce que, parmi toutes les propriétés de positionnement, c’est celle qui influence le plus son environnement.En d’autres termes, appliquer float modifie non seulement l’élément sur lequel il est appliqué, mais également ses ancêtres, ses frères et soeurs, ses descendants et les éléments suivants.float ne peut avoir qu’une de ces 3 valeurs :
leftetrighttransforme un élément en élément flottantnonesupprime l’aspect flottant
Quand utiliser float
Le fait de faire flotter un élément a pour but de le pousser d’un côté et de faire en sorte que le texte l’enroule/l’habille.
Pour expliquer ce comportement, prenons un exemple courant : faire flotter une image dans un paragraphe.
<p>
<img src="https://placehold.it/150x150">Les cloches de l'église voisine ont provoqué un tumulte agité, une charrette mal conduite a été brisée, au milieu de cris et de jurons, contre le gouffre d'eau de la rue. Des lumières jaunâtres allaient et venaient dans les maisons, et certains des taxis qui passaient arboraient des lampes non éteintes. Et au-dessus, l'aube devenait de plus en plus brillante, claire, stable et calme.
</p>Le problème lors de l’insertion d’une image dans un texte est qu’une image tient sur une seule ligne de texte et qu’elle étendra donc la hauteur de la ligne sur laquelle elle est placée. Dans notre cas, notre image est de 150px de haut.
Ce que nous voulons, c’est enrouler le texte autour de l’image :
img { float: left;}Comme vous pouvez le constater, l’image est poussée à gauche et le texte qui suit s’enroule autour de l’image :
- d’abord, le texte est poussé à droite, à côté de l’image
- puis, quand il y aura de la place sous l’image, le texte remplira cette espace
Et si le texte n’est pas assez long ?
L’image flottante débordera car elle est plus haute que son conteneur jaune. Et comme vous pouvez le constater, cela rompt même visuellement le paragraphe que vous lisez.
J’ai intentionnellement laissé cette erreur d’agencement pour montrer pourquoi les flottants sont imprévisibles: ils peuvent même briser les frères et sœurs de leurs parents!
Parce que float: left éloigne l’image du flux, la hauteur du paragraphe jaune n’est que la hauteur du texte le composant. En d’autres termes, la hauteur de l’image n’est pas prise en compte.
Float = block
Floating elements will have a display: block applied to them automatically, and will mostly behave like blocks:
- you can set a specific height and width
- if no height is set, the element’s height is that of the line-height
- if a
width: 100%is applied, it will look like a block-level element
display: block sera appliqué automatiquement aux éléments flottants
et ils se comporteront généralement comme des blocs :
- vous pouvez définir une hauteur et une largeur spécifiques
- si aucune hauteur n’est définie, la hauteur de l’élément est celle de la hauteur de ligne
- si
width: 100%est appliqué, cela ressemblera à un élément de niveau bloc
Clear et float
La propriété clear permet de pousser des éléments après le float. Il ne peut être appliqué que sur des éléments block.
<p>
<img src="https://placehold.it/150x150">
<span>Il entendit des bruits de pas dans les chambres et monta et descend les escaliers derrière lui.</span>
</p>img { float: left;}
span { clear: left; display: block;}Au lieu de placer le texte à côté de l’image, l’option clear: left pousse le texte sous l’image.
C’est différent de ne pas avoir de float ou de clear du tout, car l’image est sur sa propre ligne et non sur la même ligne que le texte.