La différence entre display:inline-block et float en CSS lors de la disposition des éléments dans une rangée

Lors de la mise en page, de nombreuses conceptions doivent disposer les éléments en ligne. Il existe de nombreuses façons de disposer les éléments en ligne. Du point de vue de la compatibilité et de la facilité d'utilisation, nous présenterons d'abord display:inline-block (affichage dans le bloc). ) et float (float).

float : Float, vous connaissez sa signification après avoir entendu son nom : faire flotter les éléments et les séparer du flux de documents, afin d'atteindre l'objectif d'organiser plusieurs éléments dans une rangée. Quelles sont les caractéristiques des éléments flottants ? Comme indiqué ci-dessous :

1. prend en charge la largeur et la hauteur

2. est affiché sur une seule ligne ; >

3. Lorsque la largeur n'est pas définie, la largeur est prise en charge par le contenu

4. se déplacera dans le ordre spécifié jusqu'à ce qu'il atteigne le flotteur. La limite de l'élément ou du parent s'arrête

5. Une fois l'élément flottant, la hauteur du parent de l'élément flottant s'effondrera
   .
6. se détache du flux du document ;

7. Une fois l'élément flottant, les marges supérieure et inférieure ne se chevauchent plus ;

8. déclenche BFC.

inline-block : bloc en ligne, qui présente les caractéristiques des éléments en ligne et au niveau du bloc. Comme indiqué ci-dessous :

1. prend en charge la largeur et la hauteur ;

2. est affiché sur une seule ligne ; > les retours à la ligne seront analysés en espaces

3. Lorsque la largeur n'est pas définie, la largeur est prise en charge par le contenu

4. Inline- ; Les éléments de type bloc auront par défaut un espace en bas

5. Les marges supérieure et inférieure des éléments de type inline-b ne se chevauchent pas

déclenche BFC.
Il ressort des caractéristiques de ces deux styles qu'ils sont identiques : 1. Largeur et hauteur du support 2. Affichage sur une seule ligne 3. Lorsque le contenu n'est pas ; défini, la largeur Il est pris en charge par le contenu ; 7. Les marges supérieure et inférieure ne se chevauchent pas et 8. BFC est déclenché. L'affichage de cette fonctionnalité dans une rangée détermine les deux éléments pouvant être disposés dans une rangée. Ensuite pour utiliser la différence, il faut commencer à analyser à partir de leurs différentes caractéristiques :
Limitation du sens de l'agencement. La quatrième caractéristique de float détermine qu'il peut déterminer l'ordre des éléments. float:left : les éléments sont disposés de gauche à droite, float:right : les éléments sont disposés de droite à gauche. Et display:inline-block ne peut être utilisé que de gauche à droite.

S'il faut rompre avec le flux documentaire. Les éléments flottants sortiront du flux de documents, mais pas display:inline-block. Il y aura donc un phénomène : lorsque le premier élément flottant ou élément inline-block occupe déjà une ligne, et que vous ajoutez margin-left:-100% au deuxième élément, le deuxième élément flottant couvrira le deuxième élément flottant par-dessus. l'élément, le deuxième bloc en ligne sera affiché dans une nouvelle ligne et déplacé en fonction de la marge gauche
L'élément flottant s'effondrera à la hauteur du parent ; Afin d'éviter l'effondrement de la hauteur de l'élément parent, cette fonctionnalité doit être traitée lors de l'utilisation de float : définir la hauteur du parent ou effacer le float
inline-block Il y a un espace au bas de l'élément par défaut. Lors de la création d'une page Web, vous devez définir l'alignement vertical : alignement vertical pour éliminer les espaces
Les éléments de type bloc en ligne généreront des espaces lorsque le code HTML sera renvoyé à la ligne ; éliminer l'impact des espaces, besoin : écrire l'élément en ligne sur une seule ligne dans la structure ou définir la taille de police du parent de l'élément en ligne sur 0 dans le style
De L'analyse des différences ci-dessus montre que Avantages et inconvénients du flotteur et du bloc en ligne : Après le flottement, dans la plupart des cas, vous devez dégager le flotteur ou régler la hauteur. display:inline-block ne peut être utilisé que sans modifier la disposition par défaut (de gauche à droite), et l'espace inférieur et les espaces à gauche et à droite causés par l'habillage du code doivent être effacés.

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!