TD 2 : Le flux flottant
Explication
Le positionnement flottant est une forme de positionnement qui retire l'élément du flux normal. Une boîte flottante est retirée du flux normal pour être placer le plus à droite ou le plus à gauche possible dans son conteneur. L'utilisation courante consiste à aligner une image à gauche ou à droite d'un texte.
Le principe : L'élément est d'abord placé normalement dans le flux. Donc si un autre élément bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux. Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur. Les éléments qui le suivent au sein du conteneur occuperont alors l'espace laissé libre autour de lui.
Applications
Application 1
Enoncé : On veut créer un bloc conteneur et y placer un contenu texte et un bloc A (appelé bloc relatif). Pour positionner cette boîte on définit des propriétés de décalages avec margin-top et left.
Partie HTML :
<BODY>
<div class="conteneur">
<div class="flotteA">
Boîte A
</div>
<p>
Texte...texte ...
</p>
</div>
</BODY>
Et la CSS correspondante :
.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}
Remarque : On peut alors observer que la boîte A définie en float left s'est logiquement placer le plus à gauche dans le conteneur et que le contenu de texte s'écoule le long de la boîte A pour occuper tout l'espace libre.
Application 2
Enoncé : On veut créer un bloc conteneur et y placer 2 boîtes flottantes, mais l'on souhaite spécifier des dimensions pour chacun des blocs. On crée un bloc conteneur qui fait 800 pixels de large. On y place d'abord une boîte A qui fait 650 pixels de largeur. On veut ensuite y placer une boite B qui fait 600 pixels de largeur. Les boîtes sont toutes les deux définies en float left. Sachant qu'il ne reste que 150 pixels de largeur libre, on peut se donner comment va se placer la boîte B.
Partie HTML :
<BODY>
<div class="conteneur">
<div class="flotteA">
Boîte A
</div>
<div class="flotteB">
Boîte B
</div>
</div>
</BODY>
Et la CSS correspondante :
.conteneur {
width:800px;
border:1px solid black;
}
.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}
Remarque : On peut constater que la boîte A s'est placée le plus à gauche dans le conteneur (comme dans l'application précédente). Par contre, l'espace disponible le plus à gauche possible de la boite A attendant insuffisant pour accueillir la boîte B, la boîte B s'est directement glissée en dessous la boîte déjà présente, cet espace correspondant à l'espace disponible le plus à gauche possible pouvant accueillir la boite B. Si la boite B avait mesuré moins de 150 pixels de largeur elle aurait pu se placer à coté de la boite A.
Retour au plan du TD