Quelle est la meilleure façon de supprimer le style CSS "float" ?

Question

Je suis assez habitué à nettoyer mes flottants en utilisantmais les choses ne cessent de changer et je ne suis pas sûr que ce soit la meilleure pratique.

Il existe un "hack" CSS (de positioneverything) disponible qui vous permet d'obtenir le même résultat sans utiliser de div de nettoyage. Mais... ils affirment que ce hack est un peu dépassé et qu'il vaudrait peut-être mieux regarder ce hack. Mais... après avoir lu 700 pages de commentaires :) il semble qu'il y ait des endroits où ce dernier hack ne fonctionne pas.

J'aimerais éviter tout "hack" javascript car je souhaite que mon nettoyage fonctionne indépendamment de l'activation du javascript.

Quelle est la meilleure pratique actuelle pour nettoyer les divs de manière indépendante du navigateur ?

Answer 1

Mise à jour: En 2014, vous devez utiliser une technique clearfix qui utilise des pseudo-éléments, comme celui mentionné par @RodrigoManguinho. Ceci est la méthode moderne pour effacer les flottants. Pour une méthode encore plus récente, consultez le micro clearfix de Nicholas Gallagher :

/**
 * Pour les navigateurs modernes
 * 1. Le contenu espace est une façon d'éviter un bug d'Opera lorsque
 *    l'attribut contenteditable est inclus ailleurs dans le document.
 *    Sinon, cela provoque un espace en haut et en bas des éléments
 *    qui sont clearfixed.
 * 2. L'utilisation de `table` plutôt que `block` est seulement nécessaire si l'on utilise
 *    `:before` pour contenir les marges supérieures des éléments enfants.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * Pour IE 6/7 seulement
 * Inclure cette règle pour déclencher hasLayout et contenir les flottants.
 */
.cf {
    *zoom: 1;
}

Réponse originale:

Je n'aime vraiment pas utiliser du balisage supplémentaire non sémantique, donc j'évite d'utiliser un élément de dégagement. Au lieu de cela, j'applique simplement overflow: hidden; au parent du flottant(s) pour les effacer. Fonctionne sur tous les navigateurs, aucun problème. Je crois que overflow: auto; fonctionne également.

Évidemment, cela ne fonctionnera pas si vous souhaitez utiliser une propriété overflow différente, mais en raison du bug de la boîte expansible d'IE6, je n'ai rarement une raison de faire délibérément déborder mes conteneurs.

Voir plus d'informations sur l'utilisation de overflow au lieu de clear pour éviter d'ajouter du balisage supplémentaire.

Answer 2

J'ai trouvé que la plupart du temps (moi-même inclus), cette méthode est utilisée dans le html :

Avec ceci dans la feuille de style :

.clear {clear: both;}

Answer 3

.clear-fix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear-fix
{
    zoom: 1;
}

    Some Div With Float
    Another Div With Float

À mon avis, c'est la meilleure façon. Pas besoin d'éléments DOM supplémentaires ou d'une mauvaise utilisation de overflow ou de tout piratage.

Answer 4

Il y a un peu de vaudou que j'ai tendance à utiliser.

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
} 

Cette combinaison résout miraculeusement tout un tas de problèmes de navigateur, et je l'utilise depuis si longtemps que j'ai oublié quels problèmes cela résout.

Answer 5

Vous voudrez peut-être regarder comment certains frameworks CSS gèrent cela. Voici Blueprint's (regardez la fin du code).