Sommaire

Les boîtes flottantes

1. Les flottements à gauche et à droite

La technique des boîtes flottantes est très utilisée pour effectuer des mises en page. Foundation vous propose trois classes pour faire flotter les éléments à gauche, au centre et à droite de leur conteneur.

Nous devons d’abord créer un conteneur qui est ici une boîte <div> utilisant obligatoirement la classe .clearfix. La boîte utilise aussi dans cet exemple la classe .callout pour mieux la visualiser avec une fine bordure grise.

Dans cette boîte, se trouvent deux liens en forme de bouton (<a class="button">) qui flottent à gauche avec l’utilisation de la classe .float-left et à droite avec .float-right.

Voici le code HTML de cet exemple :

<div class="callout clearfix"> 
  <a class="button float-left">Bouton flottant sur sa gauche</a> 
  <a class="button float-right">Bouton flottant sur sa droite</a> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 06 / 06-affichage-g1.html.

Voici le rendu obtenu :

images/C06-007.png

Voici les règles CSS qui utilisent la classe .clearfix :

.clearfix::before, .clearfix::after { 
  content: ’ ’; 
  display: table; 
} 
.clearfix::after { 
  clear: both; 
}

Nous avons un affichage en mode tabulaire (display: table;) avant et après l’élément et aucun flottement ...