clear:both pas de travail css flotteurs

Je ne sais pas pourquoi mon flotteur n'est pas de compensation, de sorte que l'enfant d'un conteneur va rester à l'intérieur du conteneur parent.

Ont un coup d'oeil à cette jsfiddle pour voir ce que je veux dire. Je veux le .shadow-wrapper div pour englober tous les autres éléments qui suivent. Comment puis-je obtenir le conteneur parent pour englober les éléments d'enfant?

OriginalL'auteur Dude | 2013-08-02

  1. 13

    Utiliser ceci:

    .shadow-wrapper {
    background-color: red;
    clear: both;
    overflow:hidden;
}

    De joindre flottait éléments que vous pouvez utiliser toute la suivantes:

    float:left;
overflow:hidden;
display:table;
display:inline-block;
display:table-cell;

    Autre solution à l'aide de l' :après la méthode:

    .shadow-wrapper:after {
    clear:both;
    content:" ";
    display:block;
}

    Comme vous pouvez le voir à partir de ce codes, clair à la fois n'a pas besoin d'être appliqué partout, seulement après que le dernier élément qui est flottant, et, par conséquent, nous pouvons utiliser la après la méthode qui simule ce.

    http://jsfiddle.net/7wja6/

    overflow:hidden; résolu. Merci!

    OriginalL'auteur user1721135

  2. 0

    Une option consiste à ajouter float:left; à .shadow-wrapper.

    .shadow-wrapper {
    background-color: red;
    clear: both;
    float: left;
}

    http://jsfiddle.net/kMGQC/1/

    OriginalL'auteur Chris Bier

  3. 0

    Une règle générale pour l'utilisation de chars et efface, c'est que si vous flotter un élément, vous devriez probablement flotter l'ensemble de ses frères et sœurs aussi. Si cela semble difficile, vous pouvez ajouter un div comme le dernier enfant et clair à la fois avec des div, cela devrait résoudre votre problème.

    <div class="wrapper">
  <div class="floating-thing">Hellllllooooo</div>
  <div class="non-floating-thing">Weeeeeeee</div>
  <div class="clearfix"></div>
</div>

    OriginalL'auteur callmehiphop