Articles
Introduction au CSS
Propriétés CSS liées au flottement

Propriétés CSS liées au flottement

Cet article explique les propriétés CSS liées au flottement.

Vous pouvez apprendre les usages et la syntaxe des propriétés float et clear.

YouTube Video

HTML pour l'aperçu

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Propriétés CSS liées au flottement

Propriétés float et clear 

 1.content {
 2    width: 300px;
 3    height: 100px;
 4}
 5
 6.content p {
 7    background-color: lightblue;
 8    margin: 10px;
 9}
10
11.float-left {
12    float: left;
13    width: 150px;
14    margin-right: 20px;
15    background-color: lightblue;
16}
17
18.float-right {
19    float: right;
20    width: 150px;
21    margin-right: 20px;
22    background-color: lightblue;
23}
24
25.clearfix {
26    clear: both;
27    display: none;
28}

float est l'une des propriétés CSS utilisées pour faire flotter un élément à gauche ou à droite dans son élément parent, permettant à d'autres éléments de s'enrouler autour de lui. La propriété float est souvent utilisée pour placer des images ou des éléments en boîte autour du texte, mais son utilisation a diminué avec l'avènement de nouvelles méthodes de mise en page comme flex et grid.

  • Dans la classe float-left, la propriété float est définie sur left. L'élément appliqué flotte sur le côté gauche de l'élément parent, et l'élément suivant s'enroule à droite.
  • La classe float-right définit la propriété float à right. L’élément auquel elle est appliquée flotte à droite de son parent, et l’élément suivant s’enroule à gauche.
  • Dans la classe clearfix, la propriété clear est définie sur both. Utiliser cette classe empêche l'élément suivant de s'enrouler autour de l'élément flottant.

Comment utiliser float

Valeurs
  • left : Fait flotter l'élément à gauche, permettant à d'autres éléments de s'enrouler sur la droite.
  • right : Fait flotter l'élément à droite, permettant à d'autres éléments de s'enrouler sur la gauche.
  • none : Ceci est la valeur par défaut et ne fait pas flotter l'élément.
  • inherit : Hérite de la valeur de la propriété float de l'élément parent.
Propriété clear
  • Lors de l'utilisation de float, l'élément suivant peut s'enrouler autour de l'élément flottant. Pour empêcher cela, la propriété clear est utilisée. Les valeurs de clear sont les suivantes :.
    • left : Évite les éléments flottés à gauche.
    • droite : Évite les éléments flottés à droite.
    • les deux : Évite les éléments flottés à la fois à gauche et à droite.
    • none: Permet aux éléments de flotter autour. C'est la valeur par défaut.

Notes

  • Lors de l'utilisation de float, il peut y avoir un problème où la hauteur de l'élément parent ignore la hauteur de l'élément flotté. Pour éviter cela, utilisez la technique clearfix ou appliquez overflow: hidden; sur l'élément parent.
  • Dans la conception responsive ou les mises en page complexes, float peut être plus difficile à gérer par rapport à flex ou grid, il est donc recommandé d'utiliser flex ou grid.
Résumé

float est une ancienne technique permettant de faire flotter des éléments à gauche ou à droite, ce qui permet au texte ou à d'autres éléments de s'enrouler autour, et elle est encore parfois utilisée pour des mises en page simples ou pour encadrer des images. Cependant, pour créer des mises en page plus flexibles et faciles, il est recommandé d'utiliser flexbox ou grid.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées à l'interface utilisateurAperçu du design réactif en CSS