Différence entre 'affichage: bloc; float: gauche 'vs' affichage: bloc en ligne; float: left '?
Existe-t-il une différence pratique entre l'affichage ou non d'un élément flottant à gauche (disons et image): inline-block; appliqué à lui, par opposition à laisser l'affichage par défaut: bloc; règle appliquée?
En d'autres termes, quelle est la différence entre:
<div style="float: left; display: inline-block;">text</div>
et
<div style="float: left; display: block;">text</div>
?
Une réponse de @thirtydot pourrait vous aider ... Lien vers la question
Je viens de découvrir que faire flotter un élément en fera également un bloc, donc en spécifiant une propriété
floatetdisplay:blockest redondant.
Oui, display: block est redondant si vous avez spécifié float: left (ou right).
(Que se passerait-il si vous essayiez de spécifier display: inline et float: left?)
display: inline ne fera aucune différence, car le réglage float: left les forces display: block "peu importe ce que":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Sinon, si 'float' a une valeur autre que 'none', la boîte est flottante et 'display' est défini selon le tableau ci-dessous.
Pour résumer ledit tableau: float = display: block.
Cependant, votre exemple spécifique de float: left; display: inline est utile dans un sens - il corrige un bogue IE6.
Y a-t-il d'autres exemples de combinaisons redondantes à surveiller? bloc et largeur? etc,
Quelques exemples:
- Si vous définissez
position: absolute, puisfloat: noneC'est forcé. - Les propriétés
top,right,bottom,leftn'auront aucun effet à moins quepositionn'ait été défini sur une valeur autre que le par défaut destatic.
Existe-t-il un outil qui peut vérifier de telles choses?
Je ne pense pas ainsi. Ce n'est pas quelque chose qui est jamais nécessaire, donc je ne vois pas pourquoi quelqu'un aurait écrit un tel outil.
Vous n'avez pas besoin de spécifier un float: left et un display: inline-block pour le même élément, vous utilisez l'un ou l'autre, pas les deux. Float est utilisé pour faire flotter du texte autour des éléments, ce n'est pas la meilleure arme à choisir lors de la mise en page. Allez avec display: block et inline-block.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Éléments de bloc - forment des boîtes selon le modèle de boîte CSS. Ils ont la largeur, la hauteur, le rembourrage, la bordure et la marge et ils s'empilent verticalement les uns sur les autres.
Éléments en ligne - ne formez pas de boîtes. Ils sont assis horizontalement l'un à côté de l'autre.
Éléments de bloc en ligne - agissent comme des éléments de bloc à l'intérieur où ils forment des boîtes. À l'extérieur, ils agissent comme des éléments en ligne assis horizontalement les uns à côté des autres au lieu de s'empiler les uns sur les autres.
Une bonne ressource: http://learnlayout.com/inline-block.html
Selon SitePoint:
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 la hauteur des compétences. Si vous avez consommé autant de didacticiels 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é, stupéfait par la complexité, et vous obtiendrez un sentiment d'accomplissement lorsque vous comprendrez enfin comment fonctionnent les flotteurs.
Ne vous laissez pas berner. Vous subissez un lavage de cerveau.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
Lorsque vous utilisez float: left; presque tous les éléments se comportent comme un élément block. Il n'y a donc aucune différence dans ce cas particulier.
