Les implémentations actuellement incomplètes de CSS2.1 contraignent souvent à sur-utiliser la propriété float afin de réaliser des mises en pages "en colonnes". Mais qui dit flottant dit très souvent recours à la propriété clear pour forcer un contenu suivant le flottant à "revenir à la ligne" au lieu de se placer à son côté. Avec parfois de désagréables surprises, quand un bloc doté de clear:left ou de clear:right réagit non seulement au flottant visé, mais aussi à un autre bloc flottant situé plus avant dans le code (par exemple, une colonne de menu), projetant alors le contenu là où on ne l'attendait pas (en dessous du menu).

Comment contrôler l'effet de la propriété clear ? Simplement à l'aide d'un contexte de formatage bloc. Derrière cette expression peu connue se cache un mécanisme fort pratique, pour peu que l'on s'accomode des contournements nécessaires pour Internet Explorer Windows 5.x-6.0.

Que voulons-nous faire ?

Supposons que notre projet soit de réaliser par exemple une mise en page de ce type, comportant un menu flottant (vert), flanqué d'un conteneur en flux dans lequel nous avons besoin de placer un autre flottant (bleu) et notre clear :

En fonction de notre code CSS, l'élément doté de la propriété clear risque fort de réagir non seulement à l'élément flottant (bleu) situé dans le même conteneur, mais aussi à l'élément flottant (vert) extérieur à celui-ci, ce qui le repoussera beaucoup plus bas que nous ne le voudrions :

Pour éviter cet effet indésirable, il nous faut limiter l'action de la propriété clear au conteneur englobant le flottant souhaité, le texte qui le suit et le clear lui-même. Pour cela, nous allons faire de ce conteneur un nouveau contexte de formatage bloc.

Qu'est-ce qu'un contexte de formatage ?

En effet, selon CSS2.1, à propos de la propriété clear :

Cette propriété indique quels côtés de la (ou des) boîte(s) d'un élément ne doivent pas être adjacents à une boîte flottante précédente. La propriété 'clear' ne prend pas en compte les flottants se trouvant dans l'élément lui-même, ni ceux appartenant à d'autres contextes de formatage bloc.

Comment créer ce contexte de formatage bloc ?

Les flottants, les éléments en positionnement absolu, les inline-blocks, les table-cells et les éléments dont la propriété overflow a une valeur autre que visible établissent de nouveaux contextes de formatage bloc.

Nous connaissons donc à présent les propriétés à utiliser sur notre conteneur :

• float:left et float:right (qui ne sont pas forcément adaptés aux contraintes de la structure concernée)
• position:absolute et position:fixed (qui ont de fortes chances de l'être encore moins)
• overflow:auto, overflow:hidden (et pour mémoire overflow:scroll), qui permettent également d'étendre le calcul de hauteur du conteneur à ses enfants flottants, ce qui peut s'avérer particulièrement intéressant pour faire d'une pierre deux coups dans certains cas de mise en plage plus complexes.
• display:table-cell qui modifiera le mode de calcul de la largeur du conteneur (il s'adaptera à son contenu) mais qui offre par ailleurs des possibilités de centrage vertical très aisé.
• display:inline-block pour lequel nous allons hélas butter sur de sérieux problèmes d'implémentation.

Qu'en est-il en effet du support de ce mécanisme dans les différents navigateurs graphiques modernes ?

Le support des propriétés générant un contexte de formatage

Les navigateurs habituellement conformes à CSS2.1 n'implémentent pas tous correctement toutes ces propriétés (comme en témoigne cette page test : Float, clear et contextes de formatage bloc) :

• Opera 8.x appliquera toutes les propriétés ci-dessus de manière correcte pour limiter l'effet du clear. Cependant, il faudra attendre la version d'Opera9.0 (actuellement au stade de preview) pour que les display:inline-block ne posent plus, par ailleurs, des problèmes d'alignement vertical dans ce navigateur.
• Firefox appliquera comme prévu les propriétés ci-dessus pour limiter l'effet de clear, à l'exception du display:inline-block, non implémenté.
• Safari agira comme prévu, sauf pour display:table-cell qui semble empêcher le conteneur de se placer à côté du flottant vert.
• Konqueror semble agir comme prévu dans tous les cas (à confirmer).

Dans tous ces navigateurs conformes, on pourra donc généralement maîtriser l'effet d'un clear à l'aide d'un overflow. Par exemple :

#wrapper-context {
overflow: auto;
}

Le cas particulier d'Internet Explorer 5.x et 6.0 Windows

Comme souvent, IE5.x-6.0 Windows souffre de ses implémentations partielles de CSS2, agravé par le conflit entre modèle de rendu CSS et haslayout :

• IE ne crée aucun contexte de formatage bloc appliquable à la propriété clear, au sens de CSS2.1, quelque-soit la propriété utilisée.
• Mais il en reproduit le comportement via les propriétés dotant le conteneur de haslayout (voir ce test : Float et haslayout (2)) :
  • Certaines coïncident avec les moins intéressantes des propriétés ci-dessus : position:absolute et float, ainsi que display:inline-block.
  • Les autres sont width et heigth (quelque-soit la valeur), ainsi que zoom (extension CSS Microsoft, implémentée à partir d'IE5.5, à utiliser dans une feuille de style en commentaires conditionnels).
• Il parviendra également au même effet si le conteneur est un tableau table (doté de haslayout par défaut).

Notons que la pre-version bêta 2 d'IE7 se comporte exactement comme IE6.0 dans ce domaine précis.

Concrètement, et pour compléter le style précédent, on aura donc fréquement recours à un height:1% ou à un zoom:1 (si le rendu dans IE5.0 n'est pas problématique), placés dans une feuille de style du type :

<!--[if lte IE 6]>
<style type="text/css">
#wrapper-context {
height: 1%;
}
</style>
<![endif]-->

Il pourrait naturellement tout aussi bien s'agir d'une feuille de style externe. Lue uniquement par Internet Explorer Windows 5.x et 6.0, cette feuille de style en commentaires conditionnels complètera le style précédent, et lui permettra de reproduire le comportement des navigateurs conformes.

Pour commenter cet article.