Éléments flottants

7.1 Propriété float

Les éléments flottants utilisant les propriétés float et clear étaient l'une des premières méthodes pour créer des mises en page complexes dans le web design. Bien que les méthodes modernes comme Flexbox et Grid soient souvent préférées, connaître l'utilisation de float et clear reste important pour travailler avec des projets anciens ou comprendre les bases du CSS.

Propriété float

La propriété float permet à un élément de "flotter" à gauche ou à droite, enveloppé par du texte et d'autres éléments. Cette propriété est particulièrement utile pour créer des mises en page avec des colonnes et pour entourer une image avec du texte.

Syntaxe :

    
      .element {
        float: left; /* ou right */
      }
    
  

Valeurs de la propriété float :

• left : l'élément flotte à gauche, et les éléments suivants l'entourent à droite
• right : l'élément flotte à droite, et les éléments suivants l'entourent à gauche
• none : valeur par défaut, l'élément ne flotte pas
• inherit : hérite de la valeur de l'élément parent

Exemple d'utilisation de float :

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>Ceci est un contenu qui va s'enrouler autour des éléments flottants. L'élément flottant à gauche sera placé à gauche, et l'élément flottant à droite sera placé à droite.</p>
      </div>
    
  

7.2 Propriété clear

La propriété clear est utilisée pour contrôler le comportement de l'enveloppement des éléments flottants. Elle permet de prévenir l'enveloppement d'un élément par des éléments flottants de certains côtés.

Syntaxe :

    
      .element {
        clear: left; /* ou right */
      }
    
  

Valeurs de la propriété clear :

• left : l'élément ne sera pas enveloppé à gauche
• right : l'élément ne sera pas enveloppé à droite
• both : l'élément ne sera enveloppé ni à gauche ni à droite
• none : valeur par défaut, l'élément est enveloppé des deux côtés

Exemple d'utilisation de clear :

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>Ce contenu ne s'enroulera pas autour des éléments flottants à cause de l'élément cleared au-dessus.</p>
      </div>
    
  

Exemple de technique "clearfix" :

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

    
      <div class="container">
        <div class="sidebar">Contenu de la barre latérale</div>
        <div class="main">Contenu principal</div>
      </div>
    
  

7.3 Avantages et inconvénients de l'utilisation de float

Avantages

1. Simplicité d'utilisation :
   • Facilité de création de mises en page simples à l'aide de float
2. Large support des navigateurs :
   • float est supporté par tous les navigateurs modernes, y compris les anciennes versions
3. Flexibilité dans les mises en page :
   • Possibilité de créer différentes mises en page, y compris l'enveloppement d'images par du texte et la création de mises en page en plusieurs lignes

Inconvénients

1. Difficultés dans la gestion de mises en page complexes :
   • float peut causer des problèmes lors de la création de mises en page complexes, surtout quand l'alignement vertical est nécessaire
2. Problèmes avec la hauteur des éléments parents :
   • Les éléments parents peuvent "s'effondrer" si tous leurs éléments enfants flottent. Cela nécessite l'utilisation de techniques comme clearfix pour les corriger
3. Obsolescence :
   • Les méthodes modernes comme Flexbox et Grid offrent des moyens plus puissants et flexibles de créer des mises en page

Exemple de création de mise en page avec float et clear

Création d'une mise en page à deux colonnes avec float et clear.

Dans cet exemple, nous créons une mise en page à deux colonnes avec une barre latérale (.sidebar) et un contenu principal (.main). Les éléments .sidebar et .main flottent à gauche, tandis que l'élément .footer avec clear: both; empêche l'enveloppement.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Contenu de la barre latérale</div>
        <div class="main">Contenu principal</div>
        <div class="footer">Contenu du pied de page</div>
      </div>
    
  

L'utilisation de float et clear reste un outil important dans l'arsenal des développeurs web, malgré l'émergence de méthodes plus modernes. Comprendre leur fonctionnement aide à la maintenance et à la mise à jour des anciens projets, ainsi qu'à la création de mises en page simples. Les méthodes modernes comme Flexbox et Grid sont souvent préférées pour créer des mises en page complexes et adaptatives, mais connaître float et clear reste pertinent.