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

normalement, quand nous voulons avoir plusieurs DIVs d'affilée, nous utiliserions float: left , mais maintenant j'ai découvert le truc de display:inline-block

exemple de lien ici . Il me semble que display:inline-block est une meilleure façon de align DIVs d'affilée, mais y a-t-il des inconvénients? Pourquoi cette approche est-elle moins populaire que le float ?

111
demandé sur XML 2013-03-02 12:41:11

5 réponses

en 3 mots: inline-block est mieux.

Bloc En Ligne

le seul inconvénient de l'approche display: inline-block est que dans IE7 et ci-dessous un élément ne peut être affiché inline-block que 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 énorme inconvénient parce que sémantiquement un <div> est pour diviser la page alors qu'un <span> est juste pour couvrir une portée d'une page, donc il n'y a pas une énorme différence sémantique. Un avantage énorme de display:inline-block est que lorsque d'autres développeurs maintiennent votre code à un point ultérieur, il est beaucoup plus évident ce que display:inline-block et text-align:right essaie d'accomplir qu'une déclaration float:left ou float:right . Mon avantage préféré de l'approche inline-block est qu'il est facile à utiliser vertical-align: middle , line-height et text-align: center pour centrer parfaitement les éléments, d'une manière intuitive. J'ai trouvé un super blog sur la façon de mettre en œuvre la croix-navigateur inline-block, sur le Mozilla blog . Voici le "compatibilité de navigateur .

Float

la raison pour laquelle l'utilisation de la méthode float n'est pas appropriée pour la mise en page de votre page est que la float propriété CSS était à l'origine destiné uniquement à ce que le texte s'enroule autour d'une image (Style magazine) et n'est pas, de par sa conception, le mieux adapté aux fins de mise en page générale. Lors du Changement des éléments flottants plus tard, parfois vous aurez des problèmes de positionnement car ils ne sont pas dans le flux de 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 arrêter leur parent de s'effondrer autour d'eux qui croise la ligne sémantique entre le style de séparation du contenu et est donc un anti-modèle dans le développement web .

tout problème d'espace blanc mentionné dans le lien ci-dessus pourrait facilement être corrigé avec la propriété white-space CSS.

Edit:

SitePoint est une source très crédible pour les conseils de conception web et ils semblent avoir la même opinion que moi:

si vous êtes nouveau dans les maquettes CSS, vous seriez pardonné de penser que utiliser les flotteurs CSS de façon imaginative est la hauteur de la compétence. Si vous ont consommé autant de CSS tutoriels de mise en page que vous pouvez trouver, vous pourriez supposons que la maîtrise des flotteurs soit un rite de passage. Vous serez ébloui grâce à l'ingéniosité, étonné par la complexité, et vous gagnerez un sens de la réussite quand vous comprenez enfin comment flotte travail.

ne vous y trompez pas. Vous êtes un lavage de cerveau.

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

2015 mise à Jour - 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'information

Dec 21, 2016 Mise à jour

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

Pull request #21389

143
répondu Alex W 2017-05-23 10:31:36

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

si vous utilisez inline-block pour les grilles qui totalisent 100% ou près de 100% de largeur, vous devez vous assurer que votre balisage HTML contient pas d'espace blanc entre les colonnes .

avec flotteurs, ce n'est pas quelque chose que vous devez vous soucier - les colonnes flottent au-dessus de n'importe quel espace blanc ou autre contenu entre les colonnes. les réponses à cette question ont de bons conseils sur les façons 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 pourriez avoir besoin de compromettre et d'utiliser des flotteurs à la place de inline-block. Il ya aussi laid CSS des trucs qui ne devraient être utilisés que dans des circonstances extrêmes, comme font-size:0; sur le contenant de la colonne, puis appliquer de nouveau la taille de la police dans chaque colonne .

par exemple:

20
répondu user568458 2017-05-23 12:26:38

si vous voulez aligner le div avec la précision de pixel, puis utiliser float. inline-block semble toujours vous demander de couper quelques pixels (au moins en IE)

4
répondu Vins 2014-01-17 04:04:53

vous pouvez trouver la réponse en profondeur ici .

mais en général avec float vous avez besoin d'être conscient et de prendre soin des éléments environnants et inline-block façon simple aux éléments de ligne.

Merci

1
répondu abhijit 2014-01-02 17:47:30

il y a une caractéristique au sujet du bloc en ligne qui peut ne pas être simple cependant. C'est-à-dire que la valeur par défaut pour vertical-align dans CSS est baseline. Cela peut causer 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 en utilisant la marge facilement.

1
répondu Sydney 2016-06-20 17:42:36