Accueil Formations Apprendre CSS 3

Mise en page web avec la méthode du float en CSS

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

Découvrez l'ancienne méthode de mise en page des sites web utilisant le float en CSS, indispensable pour comprendre certains anciens sites web.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorerons la mise en page des sites web à l'aide de la méthode du float en CSS. Cette technique, bien que moins couramment utilisée aujourd'hui, reste essentielle pour maintenir et comprendre des sites plus anciens. Nous commencerons par préparer une section avec trois articles comprenant chacun un titre, une image et un lien. L'objectif est de positionner ces articles côte à côte en les faisant flotter à gauche. Nous verrons pourquoi le footer remonte lorsqu'on utilise le float, et comment le clear boss ou l'overflow hidden peuvent résoudre ce problème. Nous aborderons également l'importance de déterminer des tailles fixes pour les éléments flottants et la gestion des marges pour bien espacer les articles. Cette leçon détaillera également l'utilisation des sélecteurs pour éviter les marges superflues sur le dernier élément.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
- Comprendre la méthode du float en CSS
- Apprendre à résoudre les problèmes de mise en page liés au float
- Savoir utiliser le clear et l'overflow pour gérer les éléments flottants

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

Comprendre l'utilisation du float en CSS est crucial pour les métiers suivants :
- Développeur front-end
- Intégrateur web
- Concepteur de sites web

Alternatives et ressources

Les alternatives à la méthode du float incluent l'utilisation de flexbox et de grid, qui sont plus modernes et puissantes pour la mise en page CSS.

Questions & Réponses

Le footer remonte parce que les éléments flottants sont sortis du flux normal du document, ce qui peut provoquer un débordement des flottes.
La propriété 'clear' en CSS est utilisée pour spécifier de quel côté un élément ne doit pas flotter par rapport à d'autres éléments flottants, permettant de réguler le positionnement des éléments flottants et éviter les chevauchements indésirables.
On peut annuler la marge à droite du dernier élément flottant en utilisant une classe spécifique ou en appliquant un sélecteur CSS approprié comme 'last-of-type' pour cibler uniquement le dernier élément et définir une 'margin-right' à 0.