Clearing Floats without Display propriété

Question

Je sais que la méthode old school pour effacer les flottants est une classe pour clear: both, et qu'elle a généralement été dépassée.

Je sais que la nouvelle méthode d'école est la largeur: 100%; débordement: automatique ou caché;

Mais lorsque le contenu dépasse dynamiquement les limites du conteneur parent, je ne peux pas utiliser la nouvelle méthode d'école. Dans ce scénario, existe-t-il une meilleure méthode que claire: les deux?

Answer 1

Elle a raison, j'ai posté un fil plus dans un effort pour consolider, mais selon le boilerplate html5 c'est le defacto clearfix maintenant:

http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

.clearfix:before, .clearfix:after { 
    content: "\0020"; display: block; height: 0; visibility: hidden; 
} 

.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

Nous utilisons <br> efface ici, donc je Je ne suis pas à la mode dans le nouveau style scolaire. Pardon.

Answer 2

Il existe deux méthodes "nouvelle école". L'un est débordement et l'autre est clearfix.

nouvelle école # 1:

#el { 
    overflow:hidden; 
    zoom:1; 
} 

Une valeur de quoi que ce soit, mais visible à débordement crée un nouveau contexte de mise en forme de bloc qui provoque flotte seront automatiquement effacées.

nouvelle école # 2:

#el:after { 
    content:""; 
    clear:both; 
    display:block; 
} 
#el { zoom:1; } 

Le clearfix génère essentiellement un des espaces invisibles « élément » qui est au niveau du bloc et efface la zone après l'élément. C'est un remplacement CSS pour l'insertion d'un div vierge qui efface pour vous.

Si vous avez besoin d'un élément qui dépasse les limites, utilisez # 2. Sinon, utilisez # 1. Le zoom déclenche hasLayout, et fait en sorte que el contienne des flottants dans pre IE7. IE7 + comprend le overflow:hidden. Comme l'a souligné Grillz, content: "\0020"; est en fait la valeur de propriété la plus récente et la plus récente pour le clearfix si vous suivez cette route. Il y a un bogue de rendu qui se produit en ce qui concerne les espaces qui peuvent être résolus en spécifiant qu'à la place d'un point, d'une chaîne vide ou d'une chaîne d'espace.