Les propriétés float et clear
Préambule
Dans le cadre des ateliers précédents, nous avons évoqué les propriétés par défaut du html, en particulier :
- Le positionnement des éléments dans le flux, c'est à dire le positionnement des derniers éléments arrivés sous ceux qui les précèdent.
- La distinction entre comportement de type block et comportement de type inline.
Ces propriétés sont des contraintes pour la mise en page, comme vous avez pu le constater dans le cadre de l'exercice sur l'insertion
d'images dans du texte.
Fort heureusement, le code css met à notre disposition des propriétés qui permettent de modifier les propriétés par défaut du html, ce sont :
- Le positionnement flottant avec la propriété float .
- Les positionnements absolute et fixed qui permettent de s'affranchir du positionnement dans le flux.
- La propriété display qui permet de modifier les comportements block et inline.
Pour commencer ce tour d'horizon, nous allons dans cet atelier, nous attaquer au positionnement flottant.
La propriété float
Cette propriété permet, en respectant certaines conditions, de s'affanchir du flux courant et de juxtaposer horizontalement des éléments de type block.
la propriété float permet également de modifier le comportement des éléments de type inline mais est essentiellement utilisée pour positionner les éléments inline "remplacés", tels que <img>, <input> ou <textarea>.
La propriété float peut prendre deux valeurs :
- float : left aligne les éléments vers la gauche
- float : right aligne les éléments vers la droite
Placement d'éléments block ou d'images
Ici un élément <img/> flottant à droite est inséré dans un élément <p class="FlotteG">
flottant à gauche.
L'élément <p class="FlotteG"> (bordure rouge) est lui même inséré dans un élément <div class="Gris"> placé dans le flux courant.
Vous pouvez remarquer que l'élément flottant à gauche repousse vers la droite le texte de la <div class="Gris"> qui le contient.
De même que
l'image flottant à droite repousse vers la gauche le texte de élément <p class="FlotteG">.
Nous pourrions faire la démonstration symétrique avec un élément <p class="FlotteD"> flottant à droite et contenant une image flottant à gauche. Dans tous le cas, il faut retenir que l'élément flottant repousse dans le sens opposé à son flottement le texte de l'élément qui le contient.
ATTENTION : l'élément flottant peut même arriver à repousser le texte des éléments voisins, si il déborde sur ceux-ci.
Si l'on place dans un même conteneur deux éléments flottants respectivement à droite et à gauche, ceux-ci repoussent dans le sens opposé à leur flottement et centrent le texte d'un élément <p> qui est placé dans le flux courant.
Ici un élément <img/> flottant à droite est inséré dans un élément <div class="FlotteG">
flottant à gauche.
Ici un élément <img/> flottant à gauche est inséré dans un élément <div class="FlotteD">
flottant à droite.
Remarquez, qu'entre les deux éléments flottants on peut insérer du texte
Règle à respecter
Pour réussir la composition ci-dessus, il faut dans le code placer d'abord les deux éléments flottants (dans n'importe quel ordre), puis l'élément <p></p> non flottant dont le contenu viendra se positionner entre les deux flottants en fonction des marges.
Examinez ci-dessous, le code html simplifié de ces deux exemples.
<img src="ImgFloat/Magellan6.jpg" style="float:right;"/>
Ici un élément <img/> flottant à droite ...
</div><div class="FlotteD">
<img src="ImgFloat/Magellan6.jpg" style="float:left;"/>
Ici un élément <img/> flottant à gauche ...
</div><p style="padding:20px;">
Remarquez, qu'entre les deux éléments flottants on peut insérer du texte.
</p>Centrer un élément avec float (ici une image)
Ça flotte à gauche ça flotte à droite mais ça ne flotte pas au milieu. Donc placer une image au milieu d'un texte est un plus compliqué que placer du texte au milieu des images et il faut recourir à des astuces.
Ici dans un élément <div class="Gris"> d'une largeur de 800px :
- Nous plaçons un élément <p class="FlotteG"> flottant à gauche d'une largeur de 455px.
- Dans l' élément <p class="FlotteG"> nous plaçons :
- Un élément <img>/> d'une largeur de 150px flottant à droite
- Du texte qui, dans le navigateur, vient se positionner à gauche de l'image flottant à droite.
- Dans le code sous l'élément <p class="FlotteG"> flottant à gauche nous plaçons un élément <p> dans le flux courant contenant du texte qui est repoussé à droite de l'élément <p class="FlotteG">.
Ainsi l'image d'une largeur de 150px est centrée entre deux zones de texte et à 323px des bords droit et gauche de l'élément <div class="Gris">.
Reconnaissons qu'il a fallu tâtonner un peu pour arriver à ce résultat exact.
Un élément <p></p> flottant à gauche est inséré dans l'élément <div class="Gris">.
Dans <p> est placé une image flottant à droite ainsi qu'un texte qui vient se positionner à gauche de l'image.
Le texte placé dans un élément <p> placé dans le flux courant est repoussé à droite de l'élément <p></p> flottant à gauche.
Examinez ci-dessous, le code html simplifié de cet exemple.
img src="ImgFloat/Magellan5.jpg" style="float:right; margin-left:6px;"/>
Un élément <p></p> flottant à gauche est inséré...
<p>
Le texte placé dans un élément <p> placé dans le flux courant est repoussé à droite...
</p>Mises en page avec float
Mise en page en Trois Colonnes
Colonne
Gauche
Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt cum aut suis finibus eos prohibent.
Colonne
Droite
Aut ipsi in eorum finibus bellum gerunt. Eorum una, pars, quam Gallos obtinere dictum est, initium capit a flumine Rhodano.
Centre
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.
Exemple de mise en page plutôt classique comprenant :
- Un élément <div id="Entete">
- Un élément <div id="ColGauche">
- float:left;
- width:17%
- margin-right:8px;
- padding:2%
- Un élément <div id="ColDroite">
- float:right;
- width:17%
- margin-left:8px;
- padding:2%
- Un élément <div id="Centre">
- qui occupe l'espace résiduel
- Un élément <div id="PiedPage">
Seules les deux colonnes latérales <div class="ColGauche"> et <div class="ColDroite"> sont flottantes.
L'élément <div class="Centre"> est placé dans le flux courant, le titre le texte et les éléments <p> de textes qu'il contient sont repoussés à gauche et à droite par les deux élément flottants et leurs marges latérales.
Examinez ci-dessous, le code html simplifié de cet exemple. Vous remarquerez que l'élément <div class="Centre"> y est placé après les deux éléments flottants.
<div id="Entete">En Tête</div>
<h4>Colonne Gauche</h4>
<p>Qua de causa Helvetii quoque reliquos Gallos...</p>
<h4>Colonne Droite</h4>
<p>Aut ipsi in eorum finibus bellum gerunt...</p>
<h3>Centre</h3>
<p>Gallia est omnis divisa in partes tres...</p>
<div id="PiedPage">Pied de Page</div>
</div>Cas de la <div id="Fernao>"
Rappelons que dans la <div id="Fernao"> nous avions prévu des éléments <p> d'une largeur de 70% réservant un espace libre à droite du corps la page. Ces éléments <p> reste cependant placés dans le flux courant.
Deux solutions s'offrent à nous pour occuper la colonne libre de droite :
- Soit faire flotter à gauche les éléments <p> et laisser le texte se positionner à droite.
- Soit placer à droite des éléments <p> une colonne flottant à droite.
C'est cette solution qui est proposée.
Nous allons donc créer une <div id="FernaoDroit"> qui occupera la colonne libre de droite sans avoir à modifier les éléments <p> de gauche.
L'id #FernaoDroit sera dotée des propriétés suivantes :
- float:right;
- width:27.5%;
- padding-right:10px;
- background:url(ImgMagellan/Gris.png);
Cet arrière-plan gris transparent est destiné à améliorer la lisibilité du texte.
Dimensionnement des éléments flottants
Dans un élément <div class="Gris"> d'une largeur de 800px, avec un padding de 8px, plaçons trois éléments <p> flottant à gauche,avec un bordure de 2px, les deux éléments
latéraux ont une largeur de 239px, l'élément central, une largeur de 238px.
Ces trois éléments s'alignent à l'intérieur de la <div class="Gris"> en fonction des marges et des paddings.
float : left
width : 239px
padding : 6px
border : 2px
margin : 0
float : left
width : 238px
padding : 6px
border : 2px
margin : 0
margin-left:10px
float : left
width : 239px
padding : 6px
border : 2px
margin : 0
margin-left:10px
Si l'on attribue à l'élément central, une largeur de 239px, l'alignement est rompu et le dernier élément à droite vient se positionner sous l'élément <div class="Gris">.
float : left
width : 239px
padding : 6px
border : 2px
margin : 0
float : left
width : 239px
padding : 6px
border : 2px
margin : 0
margin-left:10px
float : left
width : 239px
padding : 6px
border : 2px
margin : 0
margin-left:10px
La largeur de chacun des éléments <p> est de 255px : (width:239px + paddings:12px + border:4px).
Le total des trois éléments ajouté aux deux marges gauches de 10px et aux deux paddings de 8px de la <div class="Gris">, s'élève à 801px.
Ce qui excède de 1px la largeur de 800px de la <div class="Gris">.
Et oui, 1px suffit pour tout décaler!
Règle à respecter
Pour maîtriser l'alignement des éléments flottants tant en largeur qu'en hauteur, il faut que le total des dimensions de ces éléments, y compris les marges, les paddings et les bordures éventuels soit inférieur ou égal à la largeur (width) et/ou à la hauteur (height) du conteneur.
Petit inconvénient de la propriété float
L'ÉlÉment flottant est extrait du flux courant
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli
appellantur.
Hi omnes lingua, institutis, legibus inter se differunt.Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana
dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt.
Minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui
trans Rhenum incolunt, quibuscum continenter bellum gerunt. Qua de causa Helvetii quoque reliquos Gallos.
L'effet des éléments flottants sur les éléments placés dans le flux courant peut-être intéressant quand on souhaite par exemple envelopper une image avec du texte, comme dans l'exemple ci-contre.
Par contre, l'extraction des éléments flottants du flux courant peut poser problème lorsque dans une mise en page on souhaite superposer des éléments flottants puis des éléments placés dans le flux courant. Comme dans l'exemple ci-dessous.
Élément <p> 1 non flottant
Élément <p> 2 flottant :
float : left;
width : 50%;
Élément <p> 3 non flottant
</div>Code html
<div>
<p style="height : 100px; background : #fcf; color : #00b"> 1 </p>
<p style="height : 100px; float : left; width : 50%; background : #cfc; color : #00b;"> 2 </p>
<p style="height : 120px; background : #fcf; color : #00b;"> 3 </p>
Explication
L'élément <p> 2 doté de la propriété float : left est extrait du flux courant il vient se placer sous l'élément <p> 1 mais n'a pas d'effet sur le positionnement de l'élément <p> 3.<p> 3 vient se placer sous l'élément <p> 1 qui est l'avant-dernier élément dans le flux courant et glisse sous l'élément flottant <p> 2 qui repousse son texte.
On pourra en particulier remarquer dans cet exemple que l'élément flottant n'a pas d'effet sur la hauteur de l'élément <div div class="Exemple"> qui sert ici de conteneur.
La propriété clear
Fort heureusement, les CSS permettent avec la propriété clear de maîtriser ces contraintes en supprimant les effets du flottement.
La propriété clear peut prendre trois valeurs :
- clear : left supprime les effets d'éléments flottant à gauche
- clear : right supprime les effets d'éléments flottant à droite
- clear : both supprime les effets d'éléments flottant à gauche et à droite
La propriété clear doit être appliquée au premier élément placé dans le flux courant qui dans le code, suit l'élément flottant
Élément <p> 1 flottant :
float : left;
width : 50%;
Élément <p> 2 non flottant et doté de la propriété clear : left
</div>Code html
<div class="Exemple">
<p style="height : 100px; float : left; width : 50%; background : #cfc; color : #00b;"> 2 </p>
<p style="clear : left; height : 100px; background : #fcf; color : #0b0;"> 3 </p>
Explication
La propriété clear : left annule l'effet du flottement de l'élément <p> 1.L'élément <p> 2 vient se placer sous l'élément <p> 1 comme si celui-ci était dans le flux courant.
Deux astuces
Pour maîtriser la hauteur d'un élément contenant des éléments flottants deux solutions sont possibles :
- En déterminant la hauteur du conteneur
- En utilisant la propriété clear
En déterminant la hauteur du conteneur
Quand on connait la hauteur de l'élément flottant, par exemple ici une image d'une hauteur de 100px, on peut attribuer une hauteur identique ou supérieure
à l'élément qui la contient et l'effet du flottement reste limité à celui-ci.
Code ci-dessous :
<img src="ImgFloat/Recife.jpg" style="float:right; margin-top:-25px; margin-left:10px;"/>
Quand on connait la hauteur de l'élément flottant....
</p >Quelques explications sur ce code
Pour centrer verticalement le texte par rapport à l'image on a appliqué à l'élément <p class="Gris"> un padding haut de 25px.
Pour faire coïncider le bord haut de l'image avec celui de l'élément gris, on neutralise l'effet de ce padding en appliquant à l'image une marge haute négative de -25px.
Cette marge négative est plus facilement placée dans le style en ligne.
En utilisant la propriété clear
Quand on place dans un conteneur un ou plusieurs éléments flottants ainsi que du texte d'une taille variable, la hauteur de ce conteneur s'avère difficile à déterminer.
On peut dans ce cas placer en bas du conteneur un élément <p> doté de la propriété clear qui rétablit le flux courant et donne de la hauteur à l'élément conteneur.
L'élément <div class="Gris"> est doté des propriétés float : left; width:70%; padding:10px;
Sous l'élément <div class="Gris"> on place un élément <p> doté dans le style en ligne de la propriété clear : left qui annule l'effet du flottement et donne sa hauteur à l'élément conteneur <div> matérialisé par la bordure rouge.
Pour mettre en pratique ce tuto, consultez le TP Semaine 48.