Float + inline-block ? Comportement étrange

Bonsoir tout le monde,

je viens de voir un comportement étrange, je ne sais pas si je bug ou alors c'est normal ?

Le code est très simple :

<div>
  <input type="checkbox" /><span>Lorem ipsum lorem ipsum</span>
</div>

div {
  width: 100px;
}
input {
  float: left;
}
span {
  display: inline-block;
}

Dispo sur codepen : http://codepen.io/anon/pen/jJbGL

Ma question est la suivante, je ne comprend pas pourquoi le <span> passe à la ligne tout simplement... ? Il ne devrait pas être aligné avec le checkbox ?

Merci d'avance !
Bonne soirée
Modifié par psykhe (28 Aug 2013 - 18:16)

pas si tu leur donne un espace de 100px de large. Si tu élargies un peu plus ton <div>, il se comporteront comme tu veux.

Merci pour ta réponse . Mais en fait meme si je met 500px pour ma div par exemple et que je rajoute beaucoup de texte, il passera quand meme a la ligne... En gros dès que le texte est plus long que la div, il passe a la ligne. Dans mon esprit il devrait avoir le meme comportement qu'un display: block + un overflow: hidden. A savoir provoquer un contexte de formatage block... Et donc etre positionné a droite du div sans retour a la ligne. Je ne sais pas si j'ai été clair ?

Si tu ne style rien, ton span resteras a coté, puis son texte pourra passé à la ligne ,
si tu le met en inline-block, tu en fais une boite en modifiant son contexte de formatage, et si trop de texte, alors , c'est toute la boite qui passe à la ligne, que ton input float ou pas .
Ce comportement est normal.

Je ne pense pas avoir tout saisi mais si tu ne souhaites pas de retour à la ligne, avec un "display:inline-block", tu peux ajouter un "white-space:nowrap"

Merci à vous 2 !

C'est bon j'ai saisi, le <span> "inline-block" devient un bloc de la largeur de son contenu qui ne peut pas s'écouler autours du flottant, donc il passe à la ligne si le contenu devient trop grand.

Si j'avais mis : span {display: block;} ce serait également un bloc de la largeur du conteneur mais sans contexte de formatage et donc il se serait écoulé autours du flottant !

Comme quoi c'est bon de revoir les bases de temps en temps
Bonne soirée !