Comprendre la notion de float en CSS

Propriétés pour les bloc - positionnement flottant
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 2
Revoir le teaser Je m'abonne
1,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
1,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d'introduire la notion de float en CSS, de montrer comment l'utiliser pour aligner des éléments, et de discuter des défis et solutions liés à son utilisation.

Cette leçon aborde l'utilisation de la propriété float en CSS afin de positionner des éléments côte à côte dans une page web.

Dans cette leçon, nous explorons la propriété float en CSS, une notion essentielle pour la mise en page web. Historiquement, float a été largement utilisé pour créer des mises en page complexes, mais il pose plusieurs défis, notamment en ce qui concerne la gestion de la hauteur des éléments parents et la disposition des éléments suivants. Nous montrons comment placer une image et du texte côte à côte en utilisant float: left, et comment gérer les espaces entre eux grâce à la propriété margin. Nous expliquons également comment rétablir la hauteur correcte des éléments parents en utilisant des éléments de clarification tels que clear. La leçon aborde les problèmes courants liés à l'utilisation de float et propose des solutions pour s'en occuper efficacement, tout en évoquant les alternatives modernes comme Flexbox et Grid.

Voir plus
Questions réponses
Quels sont les principaux problèmes liés à l'utilisation de float en CSS?
Les problèmes principaux incluent la difficulté de gérer la hauteur des éléments parents, la nécessité d'ajouter des éléments de clarification, et le comportement imprévisible des éléments suivants.
Comment peut-on rétablir la hauteur d'un conteneur après avoir utilisé float?
On peut rétablir la hauteur d'un conteneur en ajoutant un élément de clarification après le dernier élément flottant, en utilisant la propriété clear.
Quels sont les avantages des alternatives modernes comme Flexbox et CSS Grid par rapport à float?
Flexbox et CSS Grid offrent des solutions plus modernes, flexibles et intuitives pour créer des mises en page complexes, sans les problèmes hérités de float tels que la gestion de la hauteur et le comportement des éléments suivants.
1 commentaire
1,0
1 vote
5
4
3
2
1
eve.bertieaux
Il y a 2 years
Commentaire
C'est vraiment dommage que lors de la démonstration HTML et CSS soient mélangés, je ne sais plus à un moment donné si c'est dans l'un ou l'autre, du coup je n'ai pas le résultat attendu