Avantages de l'utilisation de display: inline-block vs float: left in CSS

Normalement, lorsque nous voulons avoir plusieurs DIVs à la suite, nous utiliserions float: left, mais maintenant j'ai découvert l'astuce dedisplay:inline-block

Exemple de lien ici . Il me semble que display:inline-blockc'est une meilleure façon de procéder d' align DIVsaffilée, mais y a-t-il des inconvénients? Pourquoi cette approche est-elle moins populaire que l' floatastuce?

En 3 mots: inline-blockc'est mieux.

Bloc en ligne

Le seul inconvénient de l' display: inline-blockapproche est que dans IE7 et au-dessous, un élément ne peut être affiché que inline-blocks'il l'était déjà inlinepar défaut. Cela signifie qu'au lieu d'utiliser un <div>élément, vous devez utiliser un <span>élément. Ce n'est pas vraiment un énorme inconvénient car sémantiquement a <div>sert à diviser la page tandis que a <span>sert uniquement à couvrir une étendue de page, il n'y a donc pas une énorme différence sémantique. Un énorme avantage de display:inline-blockest que lorsque d'autres développeurs maintiennent votre code ultérieurement, il est beaucoup plus évident ce que display:inline-blocket text-align:right essaie d'accomplir qu'une instruction float:leftor float:right. Mon avantage favori de l' inline-blockapproche est qu'il est facile à utiliser vertical-align: middle, line-heightettext-align: centerpour centrer parfaitement les éléments, de manière intuitive. J'ai trouvé un excellent article de blog sur la façon d'implémenter le blocage en ligne inter-navigateurs, sur le blog Mozilla . Voici la compatibilité du navigateur .

Flotte

La raison pour laquelle l'utilisation de la floatméthode n'est pas adaptée à la mise en page de votre page est que la floatpropriété CSS était à l'origine uniquement destinée à avoir du texte autour d'une image (style magazine) et n'est, de par sa conception, pas la mieux adaptée à des fins de mise en page générale. Lorsque vous modifiez ultérieurement des éléments flottants, vous aurez parfois des problèmes de positionnement car ils ne sont pas dans le flux de la page . Un autre inconvénient est qu'il nécessite généralement un clearfix sinon il peut casser des aspects de la page. Le clearfix nécessite d'ajouter un élément après les éléments flottants pour empêcher leur parent de s'effondrer autour d'eux, ce qui traverse la ligne sémantique entre le style de séparation et le contenu et constitue donc un anti-modèle dans le développement Web .

Tous les problèmes d'espaces blancs mentionnés dans le lien ci-dessus pourraient facilement être résolus avec la white-spacepropriété CSS.

Éditer:

SitePoint est une source très crédible de conseils en conception Web et ils semblent avoir le même avis que moi:

Si vous êtes nouveau dans les mises en page CSS, vous seriez pardonné de penser que l'utilisation de flotteurs CSS de manière imaginative est le summum de la compétence. Si vous avez utilisé autant de didacticiels de mise en page CSS que vous pouvez en trouver, vous pourriez supposer que la maîtrise des flotteurs est un rite de passage. Vous serez ébloui par l'ingéniosité, étonné par la complexité, et vous aurez un sentiment d'accomplissement lorsque vous comprendrez enfin le fonctionnement des flotteurs.

Ne soyez pas dupe. Vous subissez un lavage de cerveau.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Mise à jour 2015 - Flexbox est une bonne alternative pour les navigateurs modernes :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Plus d'informations

Mise à jour du 21 décembre 2016

Bootstrap 4 supprime le support pour IE9, et se débarrasse ainsi des flotteurs des lignes et devient Flexbox complet.

Demande de tirage # 21389

Bien que je convienne qu'en général inline-blockc'est mieux, il y a une chose supplémentaire à prendre en compte si vous utilisez des largeurs en pourcentage pour créer une grille réactive (ou si vous voulez des largeurs au pixel près):

Si vous utilisez inline-blockpour des grilles d'une largeur totale de 100% ou proche de 100%, vous devez vous assurer que votre balisage HTML ne contient pas d'espace blanc entre les colonnes .

Avec les flottants, ce n'est pas quelque chose dont vous devez vous soucier - les colonnes flottent sur n'importe quel espace ou autre contenu entre les colonnes. Les réponses à cette question contiennent de bons conseils sur les moyens de supprimer les espaces HTML sans rendre votre code laid .

Si, pour une raison quelconque, vous ne pouvez pas contrôler le balisage HTML (par exemple un CMS restrictif), vous pouvez essayer les astuces décrites ici, ou vous devrez peut-être faire des compromis et utiliser des flottants au lieu d'un bloc en ligne. Il existe également des astuces CSS laides qui ne devraient être utilisées que dans des circonstances extrêmes, comme font-size:0;sur le conteneur de colonnes, puis réappliquez la taille de la police dans chaque colonne .

Par exemple:

• Voici une grille à 3 colonnes de 33,3% de largeur avecfloat: left . Cela "fonctionne juste" (mais pour le wrapper qui doit être effacé).
• Voici exactement la même grille, avecinline-block . L'espace blanc entre les blocs crée un espace de largeur fixe qui pousse la largeur totale au-delà de 100%, rompant la mise en page et faisant tomber la dernière colonne sur une ligne.
• Voici la même grille, avec inline-blocket sans espace entre les colonnes dans le HTML . Cela "fonctionne simplement" à nouveau - mais le HTML est plus laid et votre CMS pourrait forcer une sorte de mise en valeur ou d'indentation dans sa sortie HTML rendant cela difficile à réaliser en réalité.

Si vous souhaitez aligner le divpixel avec précision, utilisez float. inline-blocksemble toujours vous obliger à couper quelques pixels (au moins dans IE)

Vous pouvez trouver la réponse en profondeur ici .

Mais en général, floatvous devez être conscient et prendre soin des éléments environnants et d' inline-blockun moyen simple de mettre en ligne des éléments.

Merci

Il y a une caractéristique du bloc en ligne qui n'est peut-être pas simple. C'est-à-dire que la valeur par défaut pour l'alignement vertical dans CSS est la ligne de base. Cela peut provoquer un comportement d'alignement inattendu. Regardez cet article.

http://www.brunildo.org/test/inline-block.html

Au lieu de cela, lorsque vous faites un float: left, les divs sont indépendants les uns des autres et vous pouvez les aligner facilement en utilisant margin.