En savoir plus sur float et inline-block

Cet article présente principalement une compréhension approfondie de float et inline-block, et les analyse sous les aspects de compatibilité et d'impact sur les éléments parents. Il est recommandé aux amis pour référence

<.>Mon ​​travail a été relativement détendu ces derniers temps, j'écris donc ma propre bibliothèque

canvas. Je n'ai pas de bonnes connaissances pour écrire un blog, donc je stagne depuis 2 mois. J'ai décidé de passer du temps à en écrire un aujourd'hui. J'ai rencontré ces deux gars récemment alors que j'écrivais l'interface du projet... Alors ayons une compréhension semi-approfondie avec tout le monde
Tout d'abord, la compatibilité

Si vous utilisez float, vous n'avez pas à vous soucier de sa compatibilité avec tous les navigateurs. C'est un très ancien

attribut . >inline-block ne peut être utilisé que dans IE8 ou supérieur (y compris 8, j'ai vérifié Data, en fait, IE5.5 avait déjà inline-block, mais l'implémentation est différente, donc si vous voulez être compatible). avec les versions inférieures d'IE, vous ne pouvez utiliser que du code supplémentaire

Le code est le suivant :

display
:inline; //Forcer aucun saut de ligne zoom:1; // Utilisé pour déclencher hasLayout, les singes intéressés par une compréhension approfondie peuvent en apprendre par eux-mêmes

Le second est l'impact sur l'élément parent

Il n'y a rien à dire sur inline-block. La seule chose à noter est que chaque élément avec un ensemble inline-block aura directement des espaces. Vous pouvez l'ajouter à l'élément parent. Le code de réglage

<.> est la suivante :

font-size

 : 0 ;
pour l'éliminer, mais tout le monde connaît les conséquences, mais je pense toujours que c'est le cas. la méthode la plus simple et la plus violente. Bien sûr, il existe d'autres méthodes. Veuillez rechercher

float par vous-même. Les éléments avec cet ensemble d'attributs se détacheront du flux de texte, c'est-à-dire que ce sera le cas. identique à

position

:absolute est identique, mais ce ne sera pas la même chose pour les éléments avec cet ensemble d'attributs. Le problème est donc que l'élément parent ne changera pas la longueur et la largeur avec la taille de l'enfant. élément, mais si l'élément parent est défini sur inline-block, alors la longueur et la largeur changeront avec les éléments enfants (à condition que le navigateur soit compatible avec inline-block, s'il est compatible, j'utiliserai directement inline-block ~ ).

Par conséquent, ne définissez pas l'attribut inline-block pour l'élément parent. Parfois, vous devez effacer le

flottant.

après le dernier élément flottant avant la fin. de l'élément parent. clear

: les deux (le principe est probablement d'utiliser un élément avec flux de texte Positionner la taille de l'élément parent), pour que la hauteur de l'élément parent change avec l'élément flottant

Enfin, il y a quelques autres petites différences

Baseline : float et inline-block La ligne de base de

float est que l'élément flottant est proche du top

La ligne de base de inline-block est la ligne de base par défaut, elle est donc plus flexible et peut être utilisée avec

vertical-align

Last et last.. . Personnellement, je préfère utiliser davantage inline-block. La plupart des endroits où float est utilisé peuvent être remplacés par inline-block, qui est le seul moyen d'entourer un élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!