Les éléments flottants

Introduction

• Les CSS affichent les éléments au sein d'un flux :
  • les éléments en ligne sont affichés les uns à la suite des autres
  • les éléments conteneurs (blocs) provoquent un saut de ligne après leur affichage.
• la propriété float permet de sortir un élément du flux;
  elle définit si l'élément suivant doit s'aligner à droite ou à gauche. sauf des éléments boîtes définis en position absolue.
• valeurs possibles :
  • left : l'élément génère une boîte de bloc qui flotte à gauche et le contenu s'écoule sur son flanc droit en commençant en haut
  • right : identique mais les éléments suivants flottent à droite
  • none : pas de flottement
• lorsqu'il n'y a pas assez de place pour le flottant dans la largeur de la ligne, celui-ci se déplace vers le bas, d'une ligne à l'autre, jusqu'à en trouver une suffisamment large.
• une boîte flottante doit avoir une largeur explicite (sinon, elle prendrait tout l'espace horizontal disponible).
• la propriété clear contrôle le comportement des éléments qui suivent, dans le flux, un élément flottant.
• Exemple :

  Code CSS :

  <div style="float:left; width: 180px; border:1px solid; margin:10px">
    <img src="css/img/kopernik.jpg" alt="Mikolaj Kopernik" height="220px">
  </div>
  <p>Pour les anciens, chaque planète ...</p>
  <p>La théorie de Copernic explique ...</p>

  Dans le navigateur :
  

  (http://www.rr0.org/) Pour les anciens, chaque planète se déplaçait avec la même période, environ 1 an. Copernic corrige cette erreur en proposant une méthode pour calculer la période sidérale de chacune. Il propose de prendre en compte le temps que met une planète pour réapparaître à la même position du ciel, tout en appliquant une correction due au déplacement de la Terre pendant ce temps. Il obtient pratiquement les mêmes valeurs qu'aujourd'hui. Il calcule également la distance de chaque planète par rapport au Soleil, sur la base de la distance Terre-Soleil.

  La théorie de Copernic explique le mouvement rétrograde des planètes en abandonnant les épicycles de Ptolémée. En effet les planètes situées après la Terre (dites supérieures), allant moins vite dans leur déplacement, se font rattraper par la Terre régulièrement puis dépasser, donnant l'impression que les planètes reculent sur leur orbite. Copernic explique par sa théorie que les planètes Mercure et Vénus ne s'éloignent pas beaucoup du Soleil car elles sont plus près de lui que la Terre. Il explique également que l'effet de rétrogradation des planètes situées après la Terre (planètes "supérieures") est plus prononcé pour Mars que pour Jupiter et pour lui-même plus prononcé que pour Saturne, du fait de l'éloignement croissant des planètes.

Une mise en page à deux colonnes

• Les flottants peuvent servir pour créer des colonnes dans un document. Il suffit de le structurer avec des éléments div.
• Exemple :

  Code CSS :

  .float div {
    float:left;
    width: 47%;
    text-align:justify;
    padding:0px 10px 0px 10px;
  }

  Code HTML :

  <div class="float">
    <p>Pour les anciens ...</p>
  </div>
  <div class="float">
    <p>La théorie de Copernic ...</p>
  </div>

  Dans le navigateur :

  Pour les anciens, chaque planète se déplaçait avec la même période, environ 1 an. Copernic corrige cette erreur en proposant une méthode pour calculer la période sidérale de chacune. Il propose de prendre en compte le temps que met une planète pour réapparaître à la même position du ciel, tout en appliquant une correction due au déplacement de la Terre pendant ce temps. Il obtient pratiquement les mêmes valeurs qu'aujourd'hui. Il calcule également la distance de chaque planète par rapport au Soleil, sur la base de la distance Terre-Soleil.

  La théorie de Copernic explique le mouvement rétrograde des planètes en abandonnant les épicycles de Ptolémée. En effet les planètes situées après la Terre (dites supérieures), allant moins vite dans leur déplacement, se font rattraper par la Terre régulièrement puis dépasser, donnant l'impression que les planètes reculent sur leur orbite. Copernic explique par sa théorie que les planètes Mercure et Vénus ne s'éloignent pas beaucoup du Soleil car elles sont plus près de lui que la Terre. Il explique également que l'effet de rétrogradation des planètes situées après la Terre (planètes "supérieures") est plus prononcé pour Mars que pour Jupiter et pour lui-même plus prononcé que pour Saturne, du fait de l'éloignement croissant des planètes.

Une mise en page à trois colonnes ou plus

• Exemple :

  Code CSS :

  .ex_float {
    float: left;
    width: 23%;
    margin: 1em 0;
  }
  
  .ex_float p,h4 {
    margin: 1em;
  }
  
  .ex_float h4 {
    text-align:center;
    margin-top:0;
  }

  Code HTML :

  <div class="ex_float">
    ...
  </div>
  <div class="ex_float">
    ...
  </div>
  <div class="ex_float">
    ...
  </div>
  <div class="ex_float">
    ...
  </div>

  Pour les anciens ...

  Pour les anciens, chaque planète se déplaçait avec ...

  La théorie de ...

  La théorie de Copernic explique le mouvement rétrograde ...

Le contrôle du flux autour des flottants

• la propriété clear sert à contrôler l'affichage des éléments qui se trouvent après les éléments flottants;
  elle indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente;
  les valeurs possibles : left, right, both, none
• Exemple :

  Comparons le code CSS suivant

  .droit {
    float: right;
    margin: 0px 0px 10px 10px;
  }

  et le résultat de l'application de ce style au code HTML suivant

  <img class="droit" src="../img/kopernik.jpg" alt="Mikolaj Kopernik" width="177px"/>
  <img class="droit" src="../img/kopernik.jpg" alt="Mikolaj Kopernik" width="177px"/>
  <p>Pour les anciens, chaque ...</p>
  <p>La théorie de Copernic explique ...</p>

  avec le code CSS suivant

  .droit {
    float: right;
    margin: 0px 0px 10px 10px;
    clear: right;
  }

  et le résultat obtenu.