Comment utiliser le .clearfix classe?

Je pense que je suis la mauvaise compréhension du concept de la .clearfix classe. Peut-être que quelqu'un peut m'aider.

Je suis à la recherche d'un moyen d'utiliser float et clear sans gâcher mon balisage. Alors j'ai pensé, c'est là que .clearfix peut être utilisé pour.

À l'intérieur d'un vide H5BP-projet, mon balisage ressemble à:

    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>

Ci-dessous le résultat. Je m'attendais à un tic tac toe-champ, si. Quelqu'un peut-il me dire:

  1. Comment je peux atteindre mon objectif et
  2. Ce que le .clearfix classe peut vraiment être utilisé pour?

Comment utiliser le .clearfix classe?

OriginalL'auteur kraftwer1 | 2013-06-09

  1. 21

    La clearfix classe est utilisée sur un conteneur dont tous les enfants sont flottants. Si vous n'utilisez pas de cela, le récipient ne procureraient pas toute la hauteur (sauf dans IE). http://complexspiral.com/publications/containing-floats/

    Ce que vous êtes après est pas un clearfix, mais juste un clear. Vous pourriez faire une classe

    .clear { clear: both;}

    et de l'appliquer à la place de la clearfix que vous utilisez actuellement.

    Si vous voulez en savoir plus sur clearfix, il ya beaucoup d'informations là-bas:

    Qu'est ce qu'un clearfix?

    J'ai mis en place un petit exemple pour illustrer l'utilisation de clearfix et clear: http://jsfiddle.net/hjXMG/1

    Très bonne explication, merci beaucoup.

    OriginalL'auteur Pevara

  2. 5
    • Clearfix est ajouté autour de flottant blocs
    • Clair est ajouté après flottant blocs

    OriginalL'auteur FelipeAls

  3. -1

    Vous devez déclarer le clearfix, donc dans la balise (ou dans le fichier css) utilisation:

    <style type="text/css">
    .clearfix {
        clear: both;
    }
</style>

    Ce qu'il fait, si vous avez un float, et insérer un clearfix après elle, l'élément suivant va vers le bas.

    html5boilerplate contient déjà un .clearfix classe, qui ne font pas le même que la classe que vous fournissez. Vous êtes juste compensation, pas clearfixing github.com/h5bp/html5-boilerplate/blob/master/css/main.css

    OriginalL'auteur Stefan Moraru