Le deal à ne pas rater :
Xiaomi Mi True Wireless 2S – Écouteurs intra-auriculaires sans-fil ...
49 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Flux & flottants Empty Flux & flottants

Lun 20 Mai 2019 - 11:14

Les bases du CSS

Flux & Flottants

Coucou Smile

Dans ce tutoriel, nous allons voir un comportement que l'on peut donner à nos élements : le float.

Pour comprendre ce tutoriel, tu dois avoir lu et compris les explications suivantes :
Les bases du HTML
Les principales balises
CSS - sélecteurs, pseudo-classes et pseudo-éléments

Parlons de flux

Cette notion est souvent un peu complexe à comprendre. Du coup, on va d'abord faire preuve d'imagination Smile Imaginons que nous ayons une bassine d'eau. Dans celle-ci se trouve des cubes. On est bien d'accord que, si on penche la bassine d'un coté, tous les cubes vont aller de ce coté. Si on la laisse "stable", ils resteront à leur place.

Eh bien c'est ce qui se passe avec les flux Smile Par défaut, chacun de nos élements est "libre" dans le flux (comme si la bassine était stable). Cependant, on peut leur dire : "je veux que tu sortes du flux pour te caller gauche". On utilisera alors :
Code:
float:left;

et c'est comme si nous penchions la bassine vers la gauche.

Un exemple pour comprendre :
Code:
<!DOCTYPE html>
<html lang="fr">

<head>
 <meta charset="utf-8" />
 <meta name="description" content="Et voilà la description de ma première page html" />
 <title>Float</title>
 
 <style type="text/css">
 
 .flottement{
 border:1px solid #333;
 width:200px;
 }
 
 .flottement .boite1{
 width:80px;
 background:orange;
 float:left;
 }
 
 </style>

</head>

<body>
 
 <div class="flottement">
 <div class="boite1">
 <p>Ma boite sort du flux pour se caller sur la gauche.</p>
 </div>
 <div>
 <p>Moi, je suis l'autre bloc... Celui qui se calle par rapport au flux actuellement. D'ailleurs, dès que je le peux, je me fiche du bloc qui est sorti du flux, je prends toute la place comme si j'étais l'eau de la bassine qui s'étalle.</p>
 </div>
 </div>
 
</body>
</html>

rendu:
Flux & flottants Float1_zps9c3e5bfb

Les valeurs possibles

Tu ne peux avoir que 2 valeurs de "float" possible :

Code:
float: left;
pour dire "comme si je penche ma bassine vers la gauche"

Code:
float: right;
pour dire "comme si je penche ma bassine vers la droite"

Rétablir le flux

Supposons que je veuille avoir un truc de ce style :
Flux & flottants Float2_zps979e1aef

Nous aurons donc un titre (h1), puis 3 blocs en float left (avec des marges entre les 2), et un dernier bloc qui se place en dessous.
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Et voilà la description de ma première page html" />
  <title>Float</title>
  
  <style type="text/css">
        
    h1{
      background:grey;
      color:white;
      font: 16px/28px Arial bold;
      border:2px solid #666;
      padding: 0 24px 0 0;
      width:600px;
    }
    
    .conteneur .boite-left:first-child{
      margin-left:0;
    }
    
    .boite-left{
      float:left;
      margin-left:18px;
      background:orange;
      width:195px;
      border:1px solid black;
    }
    
    .conteneur{
      margin-bottom:18px;
    }
    
    .boite-large{
      border:2px solid;
    }
    
  </style>
  
</head>

<body>
  
  <h1>Mon titre</h1>
  

    <div class="boite-left">
      Boite 1
    </div>
    <div class="boite-left">
      Boite 2
    </div>
    <div class="boite-left">
      Boite 3
    </div>

  
  <div class="boite-large">
    Ma boite en dessous
  </div>
  
</body>
</html>
si on laisse tel quel, nous avons un souci :
Spoiler:
Flux & flottants Float-10

Eh oui, le dernier bloc se cale par rapport aux autres... On va devoir l'aider à se remettre dans le flux Smile Pour cela, il y a 2 solutions :
• soit utiliser le clear:both; sur l'élement que l'on veut remettre dans le flux :
Code:
.boite-large{
      border:2px solid;
      clear: both;
    }
• soit mettre nos 3 blocs avec le floattant dans une div "conteneur" et ajouter un peu de CSS sur celle-ci. C'est cette dernière solution que je préconise.

Comment faire ?

On aura donc ceci :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Et voilà la description de ma première page html" />
  <title>Float</title>
  
  <style type="text/css">
    
    h1{
      background:grey;
      color:white;
      font: 16px/28px Arial bold;
      border:2px solid #666;
      padding: 0 24px 0 0;
      width:600px;
    }
    
    .conteneur .boite-left:first-child{
      margin-left:0;
    }
    
    .boite-left{
      float:left;
      margin-left:18px;
      background:orange;
      width:195px;
      border:1px solid black;
    }
    
    .conteneur{
      margin-bottom:18px;
    }
    
    .boite-large{
      width:622px;
      border:2px solid;
    }
    
  </style>
  
</head>

<body>
  
  <h1>Mon titre</h1>
  
  <div class="conteneur">
    <div class="boite-left">
      Boite 1
    </div>
    <div class="boite-left">
      Boite 2
    </div>
    <div class="boite-left">
      Boite 3
    </div>
  </div>
  
  <div class="boite-large">
    Ma boite en dessous
  </div>
  
</body>
</html>

On va ensuite appliquer sur cette div (à laquelle on aura donné un nom (class ou id) ) la CSS suivante :
Code:
.conteneur:after{
 content:'';
 display:block;
 clear:both;
 }

Traduisons :
-> aprés la balise qui a pour nom de class "conteneur", on va ajouter un espace vide (content). Cet espace sera de type "block" et remettra le flux par défaut (clear:both).




Arrow Si tu veux en savoir encore plus, n'hésite pas à jeter un oeil à cet article Wink

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses