Gestion des conflits entre display, position et float

En fonction des valeurs passées, la définition d’une propriété display, float ou position peut créer des conflits ou être incompatible avec chacune des deux autres si elles ont été également définies.

En effet, les propriétés display, position et float servent toutes les trois à modifier la disposition des éléments dans la page et vont pour cela modifier le flux normal de la page.

Dans ces cas-là le CSS définira de nouvelles valeurs qui ne poseront pas de conflit pour l’une ou l’autre des propriétés. C’est ce qu’on appelle une « valeur calculée » par opposition à la « valeur spécifiée ».

Il va être très important de bien connaitre ces situations pour pouvoir prévoir le comportement de chaque propriété et pour pouvoir les définir correctement les unes par rapport aux autres et ainsi obtenir in-fine le design de page souhaité.

 

Gestion des conflits et valeurs calculées

Résumons ici ce qu’il se passe lorsqu’on utilise les propriétés display, position et float sur un même ensemble d’éléments en fonction des valeurs données.

Nous ne parlerons pas ici des valeurs des propriétés toujours en développement et ne faisant pas encore partie des recommandations officielles car leur impact n’est pas encore bien défini et car leur définition pourrait changer ou qu’elles pourraient être tout simplement abandonnées.

Voici les règles qui vont s’appliquer dans leur ordre d’application :

1. Si un élément possède un display : none, alors les propriétés float et position ne s’appliqueront évidemment pas ;
2. Si un élément est positionné avec position : absolute ou position : fixed, alors la propriété float ne s’appliquera pas (sa valeur calculée sera none et la valeur calculée du display sera celle du tableau ci-dessous ;
3. Si un élément N’est PAS positionné avec position : absolute ou position : fixed, la propriété float s’appliquera bien avec la valeur spécifiée. La valeur de display sera calculée selon le tableau ci-dessous ;
4. Si un élément N’est PAS positionné avec position : absolute ou position : fixed, qu’on NE lui applique PAS de float et que c’est l’élément racine du document, alors la valeur de display appliquée sera la valeur calculée précisée dans le tableau ci-dessous ;
5. Pour tout autre élément NON positionné avec position : absolute ou position : fixed et auquel on N’applique PAS de float, le valeur de display appliquée sera la même que celle spécifiée.

Valeur spécifiée	Valeur calculée / appliquée
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
autre	identique à la valeur spécifiée

 

Illustration des règles de calcul des valeurs en cas de conflit

Les exemples suivants illustrent quelques situations conflictuelles entre les propriétés display, position et float.

Je vous laisse vous référer aux règles précédemment citées pour comprendre les valeurs appliquées !

See the Pen Cours HTML CSS 6.4.1 by Pierre (@pierregiraud) on CodePen.

Ici, notre premier paragraphe p id="p1" possède un display : none. Les propriétés position (et top, left, etc.) et float vont donc être ignorées.

Le paragraphe p id="p2" possède une position : absolute. La valeur calculée de sa propriété float va donc être none et la valeur calculée du display va être block,

Notre paragraphe p id="p3" est positionné avec position : relative et non display n’est pas none. La propriété float va donc ici bien s’appliquer avec la propriété right. L’élément va donc flotter à gauche et être décalé de 50px vers la gauche par rapport à sa position d’origine, ce qui va le faire sortir de son conteneur. Comme l’élément flotte, la valeur calculée de son display va être block.

Finalement, notre paragraphe p id="p4" est positionné avec position : relative et ne possède pas de float. La valeur spécifiée du display va donc bien être appliquée.

Une astuce : en cas de doute sur les valeurs des propriétés appliquées à vos éléments, vous pouvez les inspecter (en faisant clic droit sur la page après avoir activé les outils pour développeur de votre navigateur) et aller voir les valeurs calculées (« computed » en anglais). Attention cependant aux inconsistences possibles entre les différents navigateurs.