Pour les éléments flottants devrions-nous toujours définir display:inline avec overflow:hidden, lorsque nous effaçons le flottement en utilisant overflow:hidden?Doit-on utiliser les deux overflow: hidden et display: inline?
est-ce bon pour la compatibilité IE? devrions-nous toujours suivre?
#secondary-col {
float:left;
overflow:hidden;
display:inline;
}
display: inline est un correctif pour IE6 pour éviter le bug à double marge. Si vous flottez quelque chose, alors c'est une bonne idée de l'inclure. Si vous avez une feuille de style spécifique à IE, il peut être préférable de la conserver (autrement, c'est une propriété inutile).
overflow: hidden est une technique utilisée pour forcer un élément contenant des éléments flottants à prendre toute la hauteur du contenu. Exemple:
<div class="wrapper">
<div class="floater">floating element</div>
</div>
Ici, la hauteur de l'enveloppe serait 0 car elle ne contient que des éléments flottants. Pour corriger cela, vous ajoutez l'une des deux propriétés à l'encapsuleur: overflow: hiddenoufloat: left. Les deux vont forcer l'emballage à avoir la bonne hauteur, mais le flotteur flottera évidemment l'élément, ce que vous ne voulez peut-être pas. Si l'encapsuleur a une hauteur fixe, n'utilisez pas le débordement car le texte peut être masqué. En gros, vous n'avez pas besoin de overflow: hidden si vous avez déjà float: left. Mais vous pouvez garder display: inline pour IE6.
I habituellement mis display:inline; pour les éléments flottants, en particulier Li pour navs horizontales. Les anciennes versions de IE ont tendance à faire des choses bizarres avec des marges sinon. En ce qui concerne le débordement, il est généralement utilisé sur le conteneur parent pour effacer les flottants si vous n'avez aucun élément adjacent auquel vous pouvez appliquer clear. Devriez-vous également appliquer overflow:hidden aux éléments enfants? Je ne peux pas me souvenir pour le moment, mais cela peut aider avec les versions plus anciennes d'Internet Explorer qui étendent les frontières de leur conteneur parent lorsque les éléments enfants sont trop grands. (Un comportement correct dicte qu'ils doivent sortir de leur conteneur.) De toute façon, IE aura toujours besoin d'un peu de peaufinage pour obtenir raison. :)