CATALOGUE Code & Data Formation Web App Créer une Web App - Vos sites Web sur mobiles

Guide basique de la propriété Float en CSS

Retour à la formation
Chapitre 4 Leçon 4
Précédent
Suivant

Apprenez à utiliser la propriété Float en CSS pour intégrer des images avec du texte qui les entoure dans vos pages web.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorerons l'utilisation de la propriété Float de CSS, qui permet de faire en sorte qu'une image insérée dans un texte soit entourée par celui-ci. Nous verrons comment insérer une balise IMG avec ses attributs de source, de largeur, de hauteur et de texte alternatif (alt). Par défaut, le texte se positionne en bas de l'image et continue dessous. Pour ajuster ceci, nous utiliserons la propriété Float pour que l'image flotte à gauche, permettant ainsi au texte de se placer à droite.

Nous aborderons également les effets de bord, comme la manière dont les éléments suivants tentent d'entourer l'image, et les techniques pour contrer cet effet en ajoutant une balise supplémentaire avec la propriété clear. Enfin, nous parlerons de l'utilisation des marges pour améliorer l'esthétique de la disposition du texte autour de l'image.

Objectifs de cette leçon

Les objectifs de cette vidéo incluent :

  • Comprendre l'utilisation de la propriété Float en CSS.
  • Apprendre à insérer des images avec les attributs corrects.
  • Savoir comment entourer une image avec du texte.
  • Maitriser l'annulation des flottements avec la propriété clear.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS.

Métiers concernés

Cette compétence est particulièrement utile pour les développeurs web front-end, les web designers et les intégrateurs HTML/CSS.

Alternatives et ressources

En alternative à l'utilisation de la propriété Float, vous pouvez explorer l'utilisation de Flexbox ou du Grid Layout en CSS moderne.

Questions & Réponses

L'attribut 'alt' est important car il fournit une description textuelle de l'image pour les lecteurs d'écran et améliore l'accessibilité du site web.
La propriété Float en CSS permet de faire flotter un élément, en le poussant vers la gauche ou la droite, et permet au texte de l'entourer.
On peut corriger cela en ajoutant une balise avec la propriété clear, qui annule le flottement et repositionne les éléments suivants de manière appropriée.