“Le meilleur clearfix jamais?”
J'ai vu cette méthode différente pour clearfix ici: http://www.marcwatts.com.au/blog/best-clearfix-ever/
Il propose d'ajouter le code CSS suivant qui automatise clearfix et ne nécessite pas l'ajout d'un "clearfix" ou de catégorie similaire pour les éléments que vous souhaitez effacer.
/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }
Qu'il ya des inconvénients à cette méthode? Cela pourrait-il finir clearfix avec les éléments que vous ne pouvez pas forcément envie clearfix ed? Ou sont les règles telles que cela permettra de tenir compte de toute situation?
Pas liés, mais savez-vous que vous pouvez utiliser plusieurs sélecteurs CSS pour un ensemble unique de règles? Pas besoin de dupliquer le CSS. Exemple:
euh, vraiment, vous devez définir plusieurs sélecteurs css:
Je sais, je suis juste le coller comme c'est sur ce site. J'ai remarqué que. 😉
Le lien en question est cassé.Merci si vous pouvez résoudre ce problème.
nav, div, header, section, ul li a, p strong {zoom:1}
euh, vraiment, vous devez définir plusieurs sélecteurs css:
article:after, aside:after, div:after, ... { clear:both; ... }
Je sais, je suis juste le coller comme c'est sur ce site. J'ai remarqué que. 😉
Le lien en question est cassé.Merci si vous pouvez résoudre ce problème.
OriginalL'auteur Jake Petroules | 2011-06-07
Vous devez vous connecter pour publier un commentaire.
Je pense que c'est une mauvaise idée. Allez-vous vraiment faire confiance à quelqu'un qui apparemment oublié de le faire:
De compensation des flotteurs n'est pas une chose compliquée à obtenir le droit.
Elle doit être traitée au cas par cas, et ne pas traineau martelé sur "chaque" élément.
Faire qui va revenir à vous mordre dans certains façon, j'en suis sûr.
Pour une chose, je suis d'accord avec @Guffa de réponse.
Un cas limite de la raison contre elle concerne IE7: http://www.satzansatz.de/cssd/onhavinglayout.html
zoom: 1
est une méthode commune pour fournir quelque chose de connu commehasLayout
à des éléments. L'application dehasLayout
à un élément résout certains types de problèmes de rendu, mais il peut aussi cause d'autres problèmes. Une citation du document lié:Personnellement, j'aime utiliser le
overflow: hidden
méthode pour contenir des flotteurs. Lorsque que ne fonctionne pas, puis-je utiliser clearfix.Vous devez utiliser la version de clearfix de http://html5boilerplate.com/:
overflow: hidden
a l'effet apparent de contenant de la flotte, mais pas de jeu prend place à l'intérieur du conteneur, contrairement à ce que clearfix. De Plus, c'est aussi un effet secondaire, c'est pourquoi il ne fonctionne pas toujours comme prévu. Cela dit, bien sûr, il existe de nombreuses façons à la peau d'un chat...J'ai souvent mélanger clair "flotte" et "contiennent des chars". Oups?
OriginalL'auteur thirtydot
Oui. Je ne voudrais pas tous les
div
élément à être effacé.OriginalL'auteur Guffa
Serait qu'il ne sera pas assez dans < IE8, depuis le "après" l'élément n'est pas bien pris en charge. Plus à ce sujet à CSS astuces
OriginalL'auteur joakimdahlstrom
Dans Cascade Cadre, je suis en utilisant la suite clearfix "bloc" au niveau des éléments :
Je n'ai jamais rencontré aucun problème avec cette technique, sauf pour les petites bizarreries lors de l'utilisation de tiers bibliothèques JS... qui peut facilement être fixé par le unclearfixing" l'élément parent.
Personnellement, je pense que clearfixed des éléments de niveau bloc beaucoup plus intuitive pour travailler avec et je n'ai pas vraiment envie de retourner travailler avec des flotteurs de façon traditionnelle plus. La seule raison pour laquelle je ne vois pas à clearfix tous les éléments de niveau bloc par défaut, parce que c'est non-standard de comportement et il pourrait confondre l'enfer hors de d'autres personnes qui lisent votre code.
Dans le cas où vous voulez vraiment un parent d'un flottaient élément à l'effondrement, une stratégie alternative serait d'utiliser
display: relative
pour le parent et l'display: absolute
pour l'enfant. Je n'ai pas rencontré de cas d'utilisation la mesure où cette stratégie n'est pas une alternative appropriée pour effondré parents de flottaient éléments.OriginalL'auteur John Slegers
J'ai été effacement de tous les divs à l'échelle mondiale au cours des deux dernières années, dans mes projets, et il a été génial de travailler pour moi. Dans environ 95% des cas où je utiliser des divs,
clearfix
a travaillé comme un charme lorsqu'il est appliqué à un site à l'échelle mondiale. Il y a certainement des cas où un problème potentiel de survenir, et je l'annulation de laclearfix
pour toute problématique divs. Les déclarations CSS que j'utilise sont:OriginalL'auteur Pegues