L1 Info : Informatique et Document, CSS
 
◃  Ch. 6 CSS avancé  ▹
 

Positionnement flottant

  • Une boite flottante (float:right|left;) est retirée du flux normal pour être placée à droite ou à gauche de son conteneur.
  • Le contenu suivant une telle boite s'intègrera le long du contenu flottant : 
    <span style="float:right; background-color:yellow">float:right</span>
<span style="float:left; background-color:lime">float:left</span>
<p>Ce paragraphe est associé à un contenu long qui va s'insérer entre deux éléments
<code>span</code> flottants à droite et à gauche...</p>
    float:right float:left

    Ce paragraphe est associé à un contenu long qui va s'insérer entre deux éléments span flottants à droite et à gauche. La division qui contient les éléments flottant et le paragraphe régit l'occupation de l'espace.

  • La propriété clear:right|left|both permet d'interdire le positionnement flottant dans un conteneur : 
    <span style="float:right; background-color:yellow">float:right</span>
<span style="float:left; background-color:lime">float:left</span>
<span style="float:right; background-color:orange">float:right</span>
<span style="float:right; background-color:red">float:right</span>
<span style="float:left; background-color:green">float:left</span>
<p style="clear:both">Ce paragraphe est associé à un contenu long qui va s'insérer entre deux éléments
<code>span</code> flottants à droite et à gauche...</p>
    float:right float:left float:right float:right float:left

    Ce paragraphe est associé à un contenu long interdisant l'incrustation d'élements flottants, ceux-ci sont affichés séparéments. Les éléments flottants situées sur le même côté sont placés côte à côte.