CSS - Propriété Float : Un Guide Pour Les Débutants

Salut à toi, futur.e magicien.ne du CSS ! Aujourd'hui, nous allons plonger dans le monde magique de la propriété float du CSS. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - à la fin de ce tutoriel, tu flotteras des éléments comme un pro !

CSS - Float

Qu'est-ce que la Propriété Float ?

Avant de sauter dans le grand bain, intéressons-nous aux bases. La propriété float est comme une baguette magique dans le CSS qui permet aux éléments de flotter à gauche ou à droite de leur conteneur. Imagine que tu arrange des meubles dans une pièce - la propriété float te permet de pousser des choses vers les côtés, laissant de la place pour que d'autres éléments puissent les entourer.

Valeurs Possibles

La propriété float peut prendre plusieurs valeurs, chacune avec son propre pouvoir spécial :

Valeur	Description
left	Flotte l'élément à gauche
right	Flotte l'élément à droite
none	L'élément ne flotte pas (par défaut)
inherit	Hérite de la valeur de flottaison de son parent

Applications

La propriété float peut être appliquée à la plupart des éléments HTML, mais elle est le plus souvent utilisée avec :

Images
Divs
Paragraphes
Titres

Syntaxe

Voici la syntaxe de base pour utiliser la propriété float :

selecteur {
float: valeur;
}

Par exemple :

img {
float: left;
}

Cela ferait flotter toutes les images de votre page à gauche.

CSS Float - Colonnes de Largeur Égale

Commençons par un exemple pratique. Imagine que vous créez un site web pour une boulangerie et que vous souhaitez afficher trois types de pâtisseries côte à côte. Voici comment vous pouvez utiliser float pour créer des colonnes de largeur égale :

<div class="pastry-container">
<div class="pastry">Croissants</div>
<div class="pastry">Éclairs</div>
<div class="pastry">Macarons</div>
</div>

.pastry-container {
width: 100%;
}

.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}

Dans cet exemple, nous flottons chaque div de pâtisserie à gauche et lui donnons une largeur de 33.33% (100% divisé par 3). La propriété box-sizing: border-box assure que le padding est inclus dans le calcul de la largeur.

CSS Float - Colonnes de Hauteur Égale

Maintenant, disons que vous souhaitez que ces colonnes aient une hauteur égale, indépendamment du contenu. Nous pouvons utiliser unpetit truc avec le padding et la marge :

.pastry-container {
overflow: hidden;
}

.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}

Cela crée l'illusion de colonnes de hauteur égale en ajoutant un grand padding-bottom et une marge négative équivalente.

CSS Float - Images Côte à Côte

Ajoutons quelques images appétissantes de pâtisseries à notre site web de boulangerie :

<div class="image-container">
<img src="croissant.jpg" alt="Croissant">
<img src="eclair.jpg" alt="Éclair">
<img src="macaron.jpg" alt="Macaron">
</div>

.image-container {
width: 100%;
}

.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}

Cela affichera nos images de pâtisseries côte à côte, chacune occupant un tiers de la largeur du conteneur.

CSS Float - Boîtes Flexibles

Mais que faire si nous voulons un layout plus flexible ? C'est là qu'intervient flexbox, le super-héros des layouts modernes en CSS :

.pastry-container {
display: flex;
flex-wrap: wrap;
}

.pastry {
flex: 1 0 300px;
margin: 5px;
}

Cela crée un layout flexible où chaque boîte de pâtisserie sera large d'au moins 300px et grandira pour remplir l'espace disponible.

CSS Float - Menu de Navigation

Les flottants sont souvent utilisés pour créer des menus de navigation horizontaux. Créons un menu pour notre boulangerie :

<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

nav ul {
list-style-type: none;
padding: 0;
}

nav li {
float: left;
}

nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}

Cela crée un menu de navigation horizontal avec chaque élément flottant à gauche.

CSS Float - Layout Web

Les flottants peuvent être utilisés pour créer des layouts web entiers. Voici un layout simple à deux colonnes :

<div class="container">
<header>Bienvenue dans Notre Boulangerie</header>
<nav>
<!-- Éléments de navigation ici -->
</nav>
<main>
<articleNotre Histoire</article>
<aside>Spécial du Jour</aside>
</main>
<footer>Contactez-Nous</footer>
</div>

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

header, nav, footer {
width: 100%;
clear: both;
}

main {
width: 100%;
}

article {
float: left;
width: 70%;
}

aside {
float: right;
width: 25%;
}

Cela crée un layout avec une zone de contenu principal et une barre latérale.

CSS Float - Paragraphe

Les flottants peuvent être utilisés pour faire envelopper du texte autour des images :

<div class="content">
<img src="baker.jpg" alt="Notre Maître Boulanger" class="float-left">
<p>Rencontrez notre maître boulanger, Chef Pierre. Avec plus de 30 ans d'expérience...</p>
</div>

.float-left {
float: left;
margin-right: 15px;
}

Cela fera envelopper le texte autour de l'image de notre maître boulanger.

CSS Float - Images Avec Marge

Ajouter des marges aux images flottantes peut améliorer la lisibilité :

img {
float: left;
margin: 0 15px 15px 0;
}

Cela ajoute un peu d'espace autour de nos images flottantes.

CSS Float - Pas de Flottaison

Parfois, vous devez empêcher un élément de flotter. La propriété clear vient à la rescousse :

.no-float {
clear: both;
}

Cela assure que l'élément avec la classe no-float apparaîtra sous tout élément flottant.

CSS Float - Flottaison à Gauche ou à Droite

N'oubliez pas, vous pouvez flotter des éléments à gauche ou à droite :

.float-left {
float: left;
}

.float-right {
float: right;
}

CSS Float - Images chevauchées

Attention ! Les éléments flottants peuvent se chevaucher s'il n'y a pas assez d'espace. Vous pouvez empêcher cela avec un nettoyage approprié :

.clearfix::after {
content: "";
display: table;
clear: both;
}

Ajoutez cette classe au conteneur parent des éléments flottants pour empêcher le chevauchement.

CSS Float - Images Non Adjacentes

Parfois, vous souhaitez que les images flottantes restent dans leur ordre d'origine :

img {
float: left;
clear: left;
}

Cela assure que chaque image commence sur une nouvelle ligne.

CSS Float - Flottaison Sous Les Prédécesseurs

Pour faire flotter des éléments sous leurs prédécesseurs :

.float-below {
clear: both;
float: left;
}

Cela efface toute flottaison précédente et fait flotter l'élément.

CSS Float - Nouvelle Ligne

Pour forcer un élément à commencer sur une nouvelle ligne après des éléments flottants :

.new-line {
clear: both;
}

CSS Float - Valeurs Connexes

Voici un tableau des propriétés et valeurs liées à la flottaison :

Propriété	Valeurs
float	left, right, none, inherit
clear	left, right, both, none, inherit
overflow	visible, hidden, scroll, auto

Et voilà, camarades ! Vous avez刚刚迈出了进入CSS浮动的世界的第一步。记住，熟能生巧，所以不要害怕尝试这些技术。在你意识到之前，你将能够创造出即使是经验最丰富的网页设计师也会自豪的美丽、基于浮动的布局。快乐编码！

Credits: Image by storyset