FAQ version Beta 0.5
Décalages, marges, bugs divers
Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?
Sur les navigateurs conformes aux standards, la position float sort l'élément du flux et de son conteneur (ce n'est pas le cas sur IE).
La propriété "clear" permet de gérer le contenu autour des éléments flottants et peut "pousser" un conteneur pour intégrer les éléments en float.
L'utilisation d'une règle horizontale <hr> (ou <hr />) dotée de la propriété "clear" peut sensiblement améliorer la lisibilité du document dans les navigateurs textes, les mobiles et les anciens navigateurs graphiques.
Lien explicatif complet : http://openweb.eu.org/articles/initiation_float/
Et exemple concret du phénomène :
http://openweb.eu.org/articles/initiation_float/annexes/annexe1.html#ex3
Lorsqu'on ne souhaite pas introduire un élément supplémentaire pour éviter le débordement des flottants, CSS2.1 permet d'exploiter la règle règle "overflow: auto" sur le conteneur. Celui-ci s'agrandit alors automatiquement si un des ses fils flottant est trop grand :
http://www.svay.com/blog/index/2005/02/27/241-une-nouvelle-solution-aux-problemes-de-float-fait-surface
http://www.sitepoint.com/blog-post-view?id=238086
Il faut noter qu'Internet Explorer nécessite parfois qu'une dimension (largeur ou hauteur) du conteneur, même inutile, soit précisée explicitement, pour appliquer cet overfow:auto.
Une troisième solution serait d'utiliser la pseudo-classe "after", comme l'explique très bien Nanoum : http://www.nanoum.net/blog/5_before_et_after.html
Seul souci de taille : Internet Explorer ne reconnaît pas (encore?) cette pseudo-classe :after.
Pour finir, un excellent article de Blog-and-blues à propos de l'utilisation de la propriété "clear" :
http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage
La propriété "clear" permet de gérer le contenu autour des éléments flottants et peut "pousser" un conteneur pour intégrer les éléments en float.
L'utilisation d'une règle horizontale <hr> (ou <hr />) dotée de la propriété "clear" peut sensiblement améliorer la lisibilité du document dans les navigateurs textes, les mobiles et les anciens navigateurs graphiques.
Lien explicatif complet : http://openweb.eu.org/articles/initiation_float/
Et exemple concret du phénomène :
http://openweb.eu.org/articles/initiation_float/annexes/annexe1.html#ex3
<div class="verte">
<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long…</p>
<p>Une boîte verte</p>
<hr class="spacer" />
</div>
.jaune {
background-color: #ffff00;
float: right;
width: 100px;
text-align: center;
margin: 0;
}
.verte {
width: 100%;
background-color: #00ff00;
}
.spacer {
clear: both;
}
<p class="jaune">Une boîte jaune flottant doté d'un contenu plus long…</p>
<p>Une boîte verte</p>
<hr class="spacer" />
</div>
.jaune {
background-color: #ffff00;
float: right;
width: 100px;
text-align: center;
margin: 0;
}
.verte {
width: 100%;
background-color: #00ff00;
}
.spacer {
clear: both;
}
Lorsqu'on ne souhaite pas introduire un élément supplémentaire pour éviter le débordement des flottants, CSS2.1 permet d'exploiter la règle règle "overflow: auto" sur le conteneur. Celui-ci s'agrandit alors automatiquement si un des ses fils flottant est trop grand :
http://www.svay.com/blog/index/2005/02/27/241-une-nouvelle-solution-aux-problemes-de-float-fait-surface
http://www.sitepoint.com/blog-post-view?id=238086
Il faut noter qu'Internet Explorer nécessite parfois qu'une dimension (largeur ou hauteur) du conteneur, même inutile, soit précisée explicitement, pour appliquer cet overfow:auto.
Une troisième solution serait d'utiliser la pseudo-classe "after", comme l'explique très bien Nanoum : http://www.nanoum.net/blog/5_before_et_after.html
#global {
border: 1px #9b9b9b solid;
}
#global:after {
content: "";
display: block;
clear: both;
}
#global div {
width: 150px;
height: 100px;
float: left;
border: 1px #c06 solid;
}
…..
<div id="global">
<div>bloc flottant</div>
<div>bloc flottant</div>
</div>
border: 1px #9b9b9b solid;
}
#global:after {
content: "";
display: block;
clear: both;
}
#global div {
width: 150px;
height: 100px;
float: left;
border: 1px #c06 solid;
}
…..
<div id="global">
<div>bloc flottant</div>
<div>bloc flottant</div>
</div>
Seul souci de taille : Internet Explorer ne reconnaît pas (encore?) cette pseudo-classe :after.
Pour finir, un excellent article de Blog-and-blues à propos de l'utilisation de la propriété "clear" :
http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage
Liens complémentaires