Le flottement est l'un des concepts CSS essentiels. Sans comprendre ce principe, il n'est pas possible de créer des sites Web basés sur CSS. En fait, le float pourrait être traduit joliment par « flotter », ce qui résume bien la situation. Fondamentalement, le flottement signifie simplement qu'un élément se place à gauche ou à droite d'un autre élément. (Normalement, l'élément serait sous un autre élément).
Un premier exemple devrait clarifier cet aspect.
<p><img src="bild.jpg" /> Dans cet ensemble, vous trouverez 12 formes personnalisées que vous pouvez utiliser dans vos dépliants, vos arrière-plans, etc. Les formes se déclinent en 18, 21 et 24 bandes ainsi que en différentes largeurs de rayons. Ces préréglages constituent une bonne base pour de beaux effets dans vos mises en page et vos images.</p>
Ici, un paragraphe a été défini. À l'intérieur de ce paragraphe se trouvent une image et un texte normal.
Un regard sur le résultat montre que l'image est dans le flux de texte.
Maintenant, passons à la propriété float.
img { float: left;}
Ici encore, un coup d'œil sur le résultat.
Ici, l'image a été flottée. Le texte s'écoule donc autour de l'image.
À la propriété float, vous pouvez attribuer les valeurs left et right pour faire flotter l'élément vers la gauche (float: left) ou vers la droite (float: right) et le laisser "flotter".
Vous pouvez également appliquer float: right à l'image.
Dans ce cas, trois choses se produisent :
• La graphique est retirée du flux normal.
• Elle se déplace tout en haut de l'élément p.
• Elle est affichée aussi loin à droite que possible.
Un regard sur les résultats actuels montre qu'ils ne sont pas vraiment beaux. En réalité, il manque des espaces entre l'image et le texte qui l'entoure. Ajustez alors la syntaxe comme suit :
img {
float: left;
margin-right: 20px;
}
Un bord droit de 20 pixels a été attribué à l'image. Cela donne l'apparence suivante :
Expérimentez simplement un peu avec les marges.
Arrêter de flotter
Revenons encore une fois à l'exemple de l'image. J'ajoute syntaxe un paragraphe de texte supplémentaire.
<p><img src="bild.jpg" />Dans cet ensemble, vous trouverez 12 formes personnalisées que vous pouvez utiliser dans vos dépliants, vos arrière-plans, etc. Les formes se déclinent en 18, 21 et 24 bandes ainsi que en différentes largeurs de rayons. Ces préréglages constituent une bonne base pour de beaux effets dans vos mises en page et vos images.</p> <p>Dans cet ensemble, vous trouverez 12 formes personnalisées que vous pouvez utiliser dans vos dépliants, vos arrière-plans, etc.</p>
Le résultat est le suivant :
En réalité, non seulement le premier paragraphe entoure la graphique. Il en va de même pour le deuxième paragraphe de texte. Cela est tout simplement dû au fait que la graphique dépasse vers le bas du premier paragraphe. Pour une meilleure compréhension, j'attribue simplement une couleur d'arrière-plan au paragraphe contenant la graphique.
Lorsque vous regardez le résultat, il est clair que la graphique dépasse effectivement vers le bas du paragraphe. Ce n'est pas toujours souhaitable de cette manière. À ce stade, la propriété clear devient intéressante. Elle permet de mettre fin au flottement. clear force un élément suivant à commencer véritablement en dessous d'un élément flottant, et non pas à côté de celui-ci. La propriété clear connaît les valeurs suivantes :
• left - termine float: left
• right - termine float: right
• both - termine à la fois float: right et float: left
Dans l'exemple suivant, j'attribue à deuxième paragraphe clear: left pour arrêter le flottement.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />Dans cet ensemble, vous trouverez 12 formes personnalisées que vous pouvez utiliser dans vos dépliants, vos arrière-plans, etc. Les formes se déclinent en 18, 21 et 24 bandes ainsi que en différentes largeurs de rayons. Ces préréglages constituent une bonne base pour de beaux effets dans vos mises en page et vos images.</p>
<p style="clear:left;">Dans cet ensemble, vous trouverez 12 formes personnalisées que vous pouvez utiliser dans vos dépliants, vos arrière-plans, etc.</p>
</body>
</html>
Grâce à la syntaxe affichée, le deuxième paragraphe est maintenant effectivement affiché sous l'image.
Dans la plupart des cas, au lieu de clear: left ou clear: right, vous pouvez directement utiliser clear: both. Il est donc conseillé de simplement créer une classe correspondante dans votre feuille de style, que vous pouvez ensuite appeler en cas de besoin.
.clearing {
clear: both;
}
Vous pouvez toujours utiliser cette classe lorsque vous souhaitez arrêter le flottement d'un élément.
<p class="clearing">Contenus ...</p>
À quoi sert le flottement
Bien entendu, le flottement n'est pas seulement nécessaire pour l'écoulement du texte en relation avec les images. En réalité, il constitue le concept de base des sites Web basés sur CSS. En effet, grâce au flottement, il est très simple de mettre en œuvre des mises en page à plusieurs colonnes. Regardez l'exemple suivant :
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Accueil</li>
<li>Contact</li>
<li>Mentions légales</li>
</ul>
</div>
<div id="inhalt">
Voici le contenu du site Web.
</div>
</body>
</html>Ici, une mise en page à deux colonnes est construite. La particularité : les colonnes se trouvent côte à côte.
Et c'est précisément cette mise côte à côte qui est réalisée grâce au concept de flottement. Des informations détaillées sur la construction de sites Web basés sur le flottement suivront dans la suite de cette série.
