Comme mentionné dans une autre réponse, l'inconvénient de l'option hidden est qu'elle va, de manière surprenante, masquer des éléments tels que les menus déroulants. Cependant, il existe un autre moyen de contenir l'information avec une seule ligne, en faisant flotter le conteneur parent. overflow: hidden a un inconvénient, et le flottement permet de résoudre de nombreux problèmes liés à l'ancien IE, notamment dans les listes. Si vous pouvez utiliser une largeur, j'utiliserais un "flottement dans un flottement", ou bien display: inline-block
Je ne dis pas que le "clearfix" n'a pas d'utilité - mais pour moi, il est trop largement ancré dans les thèmes CMS (comme Wordpress et Drupal) et je pense que dans de nombreux cas, il est trop utilisé et sur des divs qui n'ont pas réellement besoin d'être dégagés ou contenus.
Je n'arrive pas à penser à une situation où je ne pourrais pas utiliser overflow ou float, plutôt que clearfix, mais mon cerveau est en mode vacances - mais comme clearfix est une solution de copier/coller, c'est parfois la chose la plus facile à recommander, mais il doit être celui qui définit hasLayout pour IE, ce que overflow et float font aussi maintenant.
ajouté cela vient de se reproduire : et le cerveau n'est pas en mode vacances
Je commence vraiment à penser que oui, clearfix n'est pas nécessaire (du moins, je n'ai pas encore trouvé d'exemple où ce serait le cas), même l'exemple de @thirtydot ci-dessus peut être contourné avec display: inline-block tout en conservant la prise en charge d'IE6, le conteneur ayant une largeur fixe répond à l'exigence hasLayout d'IE7 et des versions inférieures, et en le transformant en bloc inline pour tous les autres navigateurs, il peut être centré et les éléments autocollants "décalés" fonctionneront correctement alors que le conteneur s'étire verticalement.
J'ai également vu une référence à un nouveau clearfix amélioré pour les marges qui s'effondrent en utilisant :before ainsi que :after dans le hack clearfix, mais à moins que je ne manque quelque chose le la démo est défectueuse - il y a des espaces irréguliers dans les pre et les cases "clearfixed" ne contiennent pas réellement de flottants, dès que vous faites flotter les éléments dans ces cases, chaque méthode s'exécute de la même manière.
Marges des notes sur pre ne réagissent pas de la même façon que les autres (essayez donc avec padding au lieu de margin pour voir la même image lors du test) et il y a aussi un autre "défaut" d'IE qui fait qu'il ne contient pas les marges correctement si elles ne sont pas explicitement spécifiées et dans la démo, il y a des marges explicites sur l'élément h2 mais pas le p donc, toutes choses égales par ailleurs, un élément clearfixed, tel que démontré par TJK dans cette page, force artificiellement le confinement des marges sur un élément de bloc normal, de la même manière qu'un padding top/bottom de 1px le ferait, car les navigateurs le font différemment de toute façon !
Si vous faites flotter les éléments à l'intérieur de ces conteneurs (ce qui est le but de la compensation de toute façon) - les marges contiennent alors comme vous le souhaiteriez probablement, comme elles le feraient à l'intérieur d'un nouveau contexte de formatage de bloc - sans aucun élément supplémentaire. :before une partie du hack, toutes les variations de clearfix fonctionnent aussi bien !
Voir la démo rechargée
Donc, à mon avis, il n'y a plus besoin de cette méthode "clearfix", il suffit de trouver la meilleure façon de créer ce nouveau contexte de formatage de bloc, en utilisant haslayout pour les anciens IE. Les propriétés sont les mêmes pour les deux !
comme le souligne TJK dans son article : http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
De meilleures alternatives
Si vous pouvez appliquer une largeur à l'élément élément contenant des flottants, alors votre meilleure option est d'utiliser :
display: inline-block; width: <any explicit value>;
Je pense que c'est juste et même avec des éléments à 100% qui pourraient avoir besoin de rembourrage, vous pouvez le faire en conjonction avec box-sizing
.clearfix {
display: inline-block;
width: 100%;
*width: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
