web-dev-qa-db-fra.com

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

Normalement, lorsque nous voulons avoir plusieurs DIVs à la suite, nous utiliserons float: left, mais j'ai découvert le truc de display:inline-block.

Exemple de lien ici . Il me semble que display:inline-block est un meilleur moyen de alignDIVs de manière consécutive, mais y a-t-il des inconvénients? Pourquoi cette approche est-elle moins populaire que l’astuce float?

csscss3css-floathtml
116
Ryan

En 3 mots: inline-block est meilleur.

Bloc en ligne

Le seul inconvénient de l'approche display: inline-block est que, dans IE7 et au-dessous, un élément ne peut être affiché que inline-block s'il était déjà inline par défaut. Cela signifie qu'au lieu d'utiliser un élément <div>, vous devez utiliser un élément <span>. Ce n'est pas vraiment un gros inconvénient car sémantiquement un <div> sert à diviser la page alors qu'un <span> ne sert qu'à couvrir une partie de la page, il n'y a donc pas une énorme différence sémantique. Un avantage énorme de display:inline-block est que, lorsque d'autres développeurs conservent votre code ultérieurement, il est beaucoup plus évident que ce que display:inline-block et text-align:right essaie d'accomplir qu'un float:left ou float:right. Mon avantage préféré de l’approche inline-block est qu’il est facile d’utiliser vertical-align: middle, line-height et text-align: center pour parfaitement centrer les éléments, de manière intuitive. J'ai trouvé un excellent article de blog sur la manière de mettre en œuvre un inline-block inter-navigateurs, sur le blog de Mozilla . Voici le compatibilité du navigateur .

Flotter

L'utilisation de la méthode float ne convient pas à la mise en page de votre page, car la propriété float CSS était initialement conçue pour que le texte entoure une image (style magazine) = et ne convient pas, par définition, à la mise en page en général. Lorsque vous modifiez ultérieurement des éléments flottants, vous rencontrez parfois des problèmes de positionnement car ils ne sont pas dans le flux de pages . Un autre inconvénient est que cela nécessite généralement un correctif, sinon cela pourrait casser certains aspects de la page. Le correctif nécessite l'ajout d'un élément après les éléments flottants pour arrêter leur parent de s'effondrer autour d'eux, qui croise la ligne sémantique séparant le style du contenu et est donc n anti-motif en développement Web .

Tout problème d’espace blanc mentionné dans le lien ci-dessus pourrait facilement être résolu avec la propriété white-space CSS.

Modifier:

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

Si vous débutez dans les modèles CSS, vous aurez l’impression que penser à utiliser des flottants CSS de manière imaginative est le summum de la compétence. Si vous avez utilisé autant de tutoriels de mise en page CSS que vous pouvez en trouver, vous pouvez supposer que la maîtrise des flottants 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 êtes en train de subir un lavage de cerveau.

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

2015 Update - Flexbox est une bonne alternative à navigateurs modernes:

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

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

Plus d'infos

Mise à jour du 21 décembre 2016

Bootstrap 4 supprime le support pour IE9 et élimine ainsi les flottants des lignes pour devenir une Flexbox intégrale.

Demande Pull # 21389

147
Alex W

Bien que je sois d’accord pour dire que inline-block est généralement préférable, il y a une chose supplémentaire à prendre en compte si vous utilisez des largeurs en pourcentage pour créer une grille sensible (ou si vous voulez des largeurs parfaites en pixels):

Si vous utilisez inline-block pour des grilles d’une largeur totale de 100% ou presque, assurez-vous que votre balise HTML ne contient pas d’espace blanc entre les colonnes .

Avec les éléments flottants, vous n'avez pas à vous préoccuper de cette question. Les colonnes flottent au-dessus de tout espace ou de tout autre contenu entre les colonnes. Les réponses à cette question contiennent de bons conseils sur la manière de supprimer les blancs 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 pouvez avoir besoin de compromettre et d'utiliser des flottants au lieu de inline-block. Il existe également de mauvais trucs CSS qui ne devraient être utilisés que dans des circonstances extrêmes, comme font-size:0; sur le conteneur de colonnes puis réapplique la taille de la police dans chaque colonne .

Par exemple:

23
user568458

Si vous souhaitez aligner le div avec une précision de pixel, utilisez float. inline-block semble vous obliger à couper quelques pixels (au moins dans IE)

4
Vins

Vous pouvez trouver la réponse en profondeur ici .

Mais en général, avec float, vous devez être conscient des éléments environnants et en prendre soin, ainsi que inline-block de manière simple pour aligner des éléments.

Merci

1
abhijit

Il y a une caractéristique à propos de inline-block qui peut ne pas être simple. C'est-à-dire que la valeur par défaut pour l'alignement vertical dans CSS est baseline. Cela peut entraîner 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 div sont indépendantes les unes des autres et vous pouvez les aligner facilement en utilisant margin.

1
Sydney