Claire:à la fois avant la fin du bloc

Si souvent, j'ai nous avons le vent de faire quelque chose comme ceci:

<div class="one">
   <div class="floating-two">content</div>
   <div class="clear"></div>
</div>

Ce que nous avons l'habitude de dire, c'est que "assurez-vous que tout flottait éléments sont inclus dans un bloc". Sof potentiellement, n'importe quel fond appliquée à la "une" apparaît derrière tout, flottants ou non.

Je suis à la recherche d'une manière plus propre de le faire. Après tout, le "clair" div est tout simplement un style que nous avons l'intention d'appliquer à la "une". Nous pourrions faire:

.floating-two:after{
  clear:both;
}

Mais ce n'est pas correct non plus. Flottant-deux ne sait pas s'il pourrait y avoir d'autres blocs suivants avant de "un"'s la fermeture.

Quelqu'un a développé un truc pour ce que c'est?

  • La compensation des flotteurs est une douleur. c'est l'une des raisons pour lesquelles je me retrouve à l'aide de display:inline-block pour la mise en plus de flotteurs de ces jours.
  • pourquoi le unaccept?
  • J'ai juste écrit une explication sur ce problème, voir ce pour une démo: stackoverflow.com/questions/9559659/...
InformationsquelleAutor KateYoak | 2011-10-22
  1. 3

    Vous pouvez utiliser overflow: hidden à l'extérieur sur le div, et il s'étendra à la hauteur nécessaire pour contenir les .floating-two. Exemple jouait ici: http://jsfiddle.net/neilheinrich/rBBMp/6/

    .one {
  overflow: hidden;
}
    • merci, surtout pour le travail par exemple. J'ai vu overflow:hidden utilisées sur la place, mais l'étirement comportement n'a jamais été clair pour moi. J'ai toujours pensé, il a été utilisé pour le clip de l'espace...
    InformationsquelleAutor nheinrich
  2. 7

    Vous pouvez effacer le faire de deux façons, sans l'ajout d'une annotation (sans <div class="clear"..> ou equiv):

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

    OU

    .one {
    overflow: hidden
}
    • Il n'est pas nécessaire de mettre un point dans le contenu. content: ""; fonctionnera aussi
    InformationsquelleAutor John Watson
  3. 1

    Vous devez ajouter un élément réel avec le clear de la propriété. Si vous n'aimez pas les divs, utiliser un <br>. C'est le plus court, élément qui permet de ne pas modifier le lay-out:

    <br class="clear" />
    • Juste une petite note ici, RobW devrait recevoir un crédit pour cette raison, il a souligné que vous avez besoin d'un élément pour effacer le flotteur.
    • Votre idée fonctionne dans certains cas, ce qui est super aussi 😉 Sur le "besoin d'un élément", voir ce violon: jsfiddle.net/qQaQg/3
    • Ce n'est pas une solution élégante et est précisément ce que j'essayais de contourner. Si je devais changer les styles des éléments qui sous-tendent, le "clair" élément peut devenir inutile, voire nuisible. Je suis à la recherche de façons de séparer les informations de style à partir du contenu - et cela est une violation de cette division.
    InformationsquelleAutor Rob W
  4. 1

    MODIFIER

    Je crois que RobW est correct en disant que vous ne pouvez pas faire cela avec :après, mais vous pouvez la rendre plus dynamique, avec ce css:

    http://jsfiddle.net/qQaQg/2

    .one :last-child
{
  clear:both;
}
    • Cela ne fonctionne pas, reportez-vous à jsfiddle.net/9eAf2.
    • Je crois que vous avez raison en affirmant qu'il est incorrect, mais je ne crois pas que votre test montre que. Je crois que celui-ci n': jsfiddle.net/qQaQg
    • Si je ne me trompe, l'arrière-plan doit inclure le deuxième DIV, ce qui n'est pas le cas.
    • J'ai ajouté un fixe la largeur et la hauteur, car lors de la construction de ça je n'ai eu que l'élément flottant. De ce fait, il ne montrent pas de fond. J'ai mis à jour la démo. Merci pour ça.
    InformationsquelleAutor Joseph Marikle