Lorsque vous positionnez un élément de façon flottante à l'aide de la propriété float:left|right;, cet élément sort du flux "normal" de la page, par conséquent il sort aussi de son élément parent le plus proche autrement dit son conteneur. Pour remédier à ce soucis la plupart d'entre vous ajoutent une balise à la fin du conteneur avec un style de type clear:both; De cette façon, l'élément conteneur arrive à savoir ou il se termine et donc l'élément flottant ne déborde plus du conteneur.
Voici un exemple typique du HTML utilisé dans ce genre de situations :
<div id="conteneur">
<div id="flottant"> </div>
<p> </p>
<hr class="pusher" />
</div>
et le code CSS :
#flottant{
width:100px;
height:100px;
float:left;
}
.pusher{
clear:both;
visibility:hidden;
}
Pour en savoir un peu plus, Openweb en parle bien mieux que moi : Initiation au positionnement CSS : 2.position float. Malheureusement, cet élément positionné en dernière position donne parfois un résultat assez désagréable au niveau de l'apparence (quelques pixels en trop en bas de votre bloc conteneur qui en colle plus aux éléments auxquels il devrait). Attention, vous avez peut être remarqué aussi que l'utilisation abusive de clear engendre des soucis d'affichages assez bizarres sur IE donc n'oublions pas le dicton ; trop de clear tue le clear
Afin d'éviter, ces petits désagréments dut à l'ajout de cette balise à la fin du conteneur et de ses styles, nous allons utiliser d'autres styles afin d'avoir l'effet voulu, en fait sur l'élément conteneur, il suffit d'ajouter overflow:auto; (et zoom:1;, mais cette propriété n'est utile que pour IE). Du coup, avec cette propriété, on a plus besoin d'ajouter une balise à la fin du conteneur.
Voici un exemple du HTML utilisé pour avoir le même type d'affichage :
<div id="conteneur">
<div id="flottant"> </div>
<p> </p>
</div>
et le code CSS :
#conteneur{
overflow:auto;
zoom:1;
}
#flottant{
width:100px;
height:100px;
float:left;
}
EDIT : Attention, cette méthode à quelques restriction notamment si vous voulez positionner un élément de façon absolute à l'intérieur du conteneur, Si cet élément sort complètement ou bien en partie du conteneur, on va avoir un soucis au niveau de l'affichage. Ce soucis est du à l'utilisation de la propriété overflow:auto; qui gère tout ce qui doit s'affiche en dehors du conteneur. Une page d'exemples vaut bien un long discours : voir la page d'exemple sur les éléments flottants
Contact