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

127

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?

Ryan
la source
@Moak Ces questions particulières concernent inline, non inline-block. Mais le premier en relation est bon: stackoverflow.com/a/11823622/918414
ThinkingStiff
2
exemple de lien est mort
information_interchange

Réponses:

156

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

Alex W
la source
4
"clearfix" est juste un nom; le «correctif» indique la correction d'attentes incorrectes et / ou une implémentation incorrecte du navigateur. Je suis (heureusement) d'accord qu'il existe des alternatives au flottement / compensation, mais il n'y a rien de fondamentalement cassé ou fixe à ce sujet.
Tim Medora
10
@Alex - Existe-t-il un moyen non piraté et compatible avec tous les navigateurs pour supprimer les espaces entre les éléments de bloc en ligne situés sur des lignes séparées? J'aimerais pouvoir arrêter d'utiliser des flotteurs mais les meilleurs liens que j'ai pu trouver sur ce problème ( ici et ici ) ne sont pas satisfaisants. Vous mentionnez la white-spacepropriété - pouvez-vous expliquer cela?
antinome
3
@Alex - merci, c'est très cool, mais je trouve toujours l'approche float-with-modern-clearfix un peu plus maintenable, car elle ne cassera pas si je personnalise un jour letter-spacingailleurs dans mon CSS.
antinome
1
pourquoi le bootstrap utilise-t-il toujours float pour son système de grille? N'est-ce pas une mise en page?
AzDesign
2
Gardez à l'esprit que le bloc en ligne ajoute un espace blanc autour des éléments. Si vous l'utilisez pour une grille ou si vous ne voulez pas de cet espace blanc, vous devrez ajouter des hacks de style / HTML supplémentaires pour en tenir compte. Voir: css-tricks.com/fighting-the-space-between-inline-block-elements
kretzm
23

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:

user56reinstatemonica8
la source
existe-t-il une solution de contournement possible pour le no-white-between, peut-être div+(whitespace) {display:none}ou quelque chose?
NoBugs
1
Voir le troisième paragraphe après sa première phrase ... Voir en particulier la question liée
user56reinstatemonica8
@NoBugs applique simplement la taille de la police: 0; à l'élément contenant, faites juste attention si vous ne disposez pas de tailles de police spécifiques définies sur les éléments dans les blocs en ligne !!
Jai
@Jai Exactement, et puisque le style / la vue doit être disjoint du processus de création du html / modèle, c'est une mauvaise pratique. (Et si vous utilisez un service qui vous a donné <div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
NoBugs
4

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

Vins
la source
6
Ouais, c'est parce que vous devez éviter d'utiliser des espaces entre les éléments car les blocs en ligne prennent en compte les espaces de la même manière que les éléments en ligne. Gardez les balises de bloc en ligne serrées les unes par rapport aux autres et sans problèmes de pixels.
Ben Sinclair
Cela peut également être une différence de navigateur avec le remplissage / marge par défaut sur les éléments .. Eh bien, au moins dans le passé, je l'ai toujours fait * {padding:0px; margin:0px; }car cela aide à équilibrer mon codage
Angry 84
Est-ce la raison pour laquelle Bootstrap (peut-être d'autres) l'utilise plutôt que le bloc en ligne, je me demande?
NoBugs
1

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

abhijit
la source
1

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.

Sydney
la source