Bienvenue sur le site de Jef

La position float retire une boîte du flux normal pour la placer le plus à droite (float: right) ou le plus gauche (float: left) possible dans son conteneur.
Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre.

Le fonctionnement des flottants

Code CSS:

.jaune { float:right; width:100px; margin:0; background-color:yellow; }
.verte { background-color:green; }

Code html:

<p class="jaune">Une boîte jaune flottant</p>
<p class="verte">Une boîte verte doté d'un contenu plus long…</p>

Le résultat peut être observé ci-dessous:

Le navigateur place tout d'abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte.
Le flux occupe tout l'espace disponible: la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de la boîte flottante jaune.

Le problème du débordement

Reprenons notre exemple, mais inversons les contenus: celui de la boîte flottante jaune est à présent plus long que celui de la boîte verte :
Code CSS:

.jaune { float:right; width:100px; margin:0; background-color:yellow; }
.verte { background-color:green; }

Code html:

<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long…</p>
<p class="verte">Une boîte verte</p>

Le résultat peut être observé ci-dessous:

La solution : le spacer

Pour éviter cet effet parfois disgracieux, la solution la plus répandue est le spacer qui consiste à inclure dans la boîte verte un élément bloc au contenu fictif (l'espace insécable  ), doté de la propriété clear qui lui interdit d'être adjacent à une boîte flottante.
Code CSS:

.jaune { float:right; width:100px; margin:0; background-color:yellow; }
.verte { background-color:green; }
.spacer { clear: both; }

Code html:

<div class="verte">
<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long…</p>
<p>Une boîte verte</p>
<div class="spacer"> </div>
</div>

Le résultat peut être observé ci-dessous:

Le bloc spacer, ne pouvant se placer à côté du bloc flottant, se trouve décalé plus bas que celui-ci.

Une variante du spacer : <hr />

Le défaut du spacer est d'introduire dans le code HTML un contenu fictif à des fins de présentation… Lorsque la boîte adjacente à la boîte flottante est suivie d'une coupure logique dans votre page (nouvelle section de texte…), il est préférable d'associer la propriété clear à un contenu réel.
La ligne horizontale créée par la balise <hr /> peut jouer avantageusement ce rôle :

.jaune { float:right; width:100px; margin:0; background-color:yellow; }
.verte { background-color:green; }
hr  { clear: both; }

Code html:

<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long…</p>
<p class="verte">Une boîte verte</p>
<hr/>

Le résultat peut être observé ci-dessous:

La ligne de séparation s'avère très utile pour les utilisateurs de navigateurs qui ne tiendront pas compte de la feuille de style (navigateurs textes, navigateurs périmés…) Il est possible de leur en réserver l'affichage, en le supprimant dans les navigateurs qui appliqueront la feuille de style, à l'aide de la propriété visibility: hidden;
celle-ci rend un élément invisible, tout en le laissant agir sur le flux.

hr  { clear:both; visibility:hidden; }

Le résultat ci-dessous est visuellement identique au spacer précédent.

Les vignettes

Les vignettes sont une série de boîtes flottantes placées dans une boîte conteneur.
On va donc créer une boîte délimitant l'espace visuel où s'affichent les boîtes flottantes.

.flottante { float:left; width:100px; margin:2px; background-color:#green;}
.conteneur { width:100%;  border: 1px solid black; }
.spacer { clear: both; }

Code html:

<div class="conteneur">
  <p class="flottante">boîte verte 1</p>
  <p class="flottante">boîte verte 2</p>
  <p class="flottante">boîte verte 3</p>
  ...
  ...
  etc
  <div class="spacer"> </div>
</div>

On obtient une série de vignettes pouvant accueillir par exemple des images, les liens d'un menu de navigation, etc. ou encore permettant de réaliser une mise en page en colonnes… Elle s'adapte automatiquement à la largeur d'affichage disponible : faute de place à droite, une boîte flottante sera replacée à la ligne.
Le résultat peut être observé dans l'exemples :

Une mise en page à deux colonnes

La combinaison de la position flottante et du flux permet de réaliser aisément une mise en page à deux colonnes (un contenu et un menu) :
Code CSS:

.contenu { float:left; width:70%; background-color:#fff; }
.menu 	  { margin-left:80%; padding:1em; background-color:#6FF; }

Code html:

...
<body>
  <div class="contenu">
    …
  </div>

  <div class="menu">
    <ul>
      <li>lien 1</li>
      <li>lien 2</li>
      <li>lien 3</li>
    </ul>
  </div>
</body>

Le résultat peut être observé ci-dessous:

Une mise en page à trois colonnes et plus

Mais on peut tout aussi bien multiplier les flottants pour créer autant de colonnes que voulu :
Code CSS:

.colonne { float:left; width:25%; margin:1em; background-color:#fff; }

Code html:

...
<div class="colonne">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

<div class="colonne">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

<div class="colonne">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

<div class="colonne">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

Le résultat peut être observé ci-dessous: