Comprendre display:inline; et float:left;_CSS/HTML

Tout d'abord, nous devons clarifier la signification correcte de display:inline; et float:left;. display: inline (inline) "CSS Definitive Guide" Affichage du texte chinois : tout élément visible qui n'est pas un élément de niveau bloc est un élément en ligne. La caractéristique de ses performances est la forme de « disposition en lignes ». La « disposition en lignes » signifie ici que sa forme d'expression est toujours affichée en lignes. Par exemple, lorsque nous définissons un élément en ligne border-bottom:1px solid #000;, il sera répété sur chaque ligne et il y aura une fine ligne noire sous chaque ligne. S'il s'agit d'un élément de niveau bloc, la ligne noire affichée n'apparaîtra qu'en dessous du bloc.

Bien sûr, cela ne semble pas être la différence entre display:inline; et float:left;, mais lorsque nous comprendrons les caractéristiques de float:left;, nous comprendrons ce qui se passe. float:left; (left float) est une fonctionnalité de mise en page spéciale qui fait que l'élément spécifié s'éloigne du flux de documents ordinaire. Et FLOAT doit être appliqué aux éléments de niveau bloc, ce qui signifie que le flottement ne s'applique pas aux balises en ligne. Ou en d'autres termes, lorsque FLOAT est appliqué, cet élément sera désigné comme élément de niveau bloc.

Ensuite, nous sommes très clairs, la largeur et la hauteur ne peuvent pas être définies pour les éléments inline (display:inline;), car inline appartient à la disposition en ligne, et sa caractéristique est d'être disposée sur une seule ligne, donc la largeur et la hauteur ne peut pas être réglé.