Le cas des blocs flottants

Les blocs flottants (float:left ou float:right) ne fusionnent jamais leur marges avec aucun autre bloc. Ainsi l'exemple suivant illustre ce principe (les paragraphes ont une marge haut et bas par défaut de 1em) :   

<div id="conteneur">
  <p id="flottant">Lorem ipsum dolor sit amet...</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  Curabitur posuere neque mattis dolor. 
  In hac habitasse platea dictumst.</p>
</div>
#conteneur{  
background: #DDD;
}

#flottant{  
float: left;  
background: #666;
}

ceci produira l'affichage suivant :

Malheureusement pour nous, Internet Explorer (y compris la version 7, dommage...) ignore totalement cette exception à la règle :

Attention donc à cette différence de rendu entre Internet Explorer et les autres navigateurs (y compris en mode de rendu strict). Pour éviter cela, le mieux est d'harmoniser l'affichage en supprimant les marges du bloc flottant pour tous les navigateurs.

La proprieté clear

Ajoutons maintenant un troisième paragraphe doté de la proprieté clear:both :

Ici sous Firefox, on constate que l'espace entre le bloc flottant et le bloc clear est de 1em, on pourrait donc croire que leur marges fusionnent. Or il n'en est rien, cet espace est uniquement du à la marge du bloc flottant. Les marges du bloc clear n'affectent en rien le bloc flottant, on le constate si l'on applique une marge de 3em au bloc clear :

L'espace entre celui-ci et le bloc flottant est toujours de 1em. La marge de 3em du bloc clear servira à créer un espace uniquement avec les blocs suivants et précédents dans le flux de page, ici en particulier avec le 2e paragraphe.

A ce moment, le comportement d'Internet Explorer est un peu étrange :
  • Sous IE6, le deuxième paragraphe "disparait" si le bloc flottant touche le bloc clear, c'est le fameux peekaboo bug.
  • Sous IE6 et 7, selon la hauteur du deuxième paragraphe, la marge du bloc flottant pousse le bloc clear ou pas :



Pour le peekaboo bug, la solution est simple et connue, il faut dotter le bloc conteneur d'un layout, avec un height:1% par exemple.

Pour le reste il s'agit du même souci que plus haut, la solution encore une fois consiste à harmoniser l'affichage pour tous les navigateurs en fixant les marges du bloc flottant à 0.