CSS: solution propre à la marge de l'effondrement problème lorsqu'un élément flottant

Exemple HTML+CSS:

<html>
  <body style="padding: 0; margin: 0;">
    <div style="float: right;">first</div>
    <div style="margin-top: 2em;">second</div>
  </body>
</html>

Comportement souhaité: la first div flotte en haut à droite de la fenêtre. Comportement réel: il flotte 2em ci-dessous la position souhaitée. Raison: l'effondrement de la marge.

En dépit de l'identification du problème, les solutions que je peux venir avec envie hacks:

changement body style de margin: -1px 0 0 0; border-top: 1px solid;.
insérer <div style="height: 1px; margin-bottom: -1px;"></div> avant first
insérer ci-dessus <div> entre les first et second

Est-il propre, idiomatiques façon d'éviter ce problème?

Connexes: clair et l'effondrement de l'fix.

InformationsquelleAutor jameshfisher | 2011-06-01

22

Ajoutant overflow: hidden; à la body devrait résoudre votre problème. Elle définit un nouveau bloc de mise en forme de contexte comme décrit dans cet article: La magie de l'overflow: hidden.

jsFiddle Démo (le body tag est ajouté automatiquement par jsFiddle, c'est pourquoi je n'ai pas inclus dans la balise HTML)

Mise à JOUR (merci à @clairesuzy): Cette solution ne fonctionne pas si body a padding: 0. Jusqu'à ce que je peux trouver une meilleure façon, je ne peux que suggérer d'ajouter un wrapper autour de deux divs (au moins je mérite maintenant @Marcel downwote :)), ce qui je pense est plus propre que les solutions postées par les OP. J'ai l'habitude d'ajouter un wrapper autour de flottaient des trucs de toute façon (il est plus facile de manipuler des navigateurs plus anciens, la plupart du temps), la plupart du temps, il n'a pas besoin d'être ajouté délibérément, parce que c'est de la logique et de la sémantique nécessaire.

Donc pour l'instant, je peux venir avec ce:
```
<body style="padding: 0; margin: 0;">
   <div id="container" style="overflow: hidden;">
       <div style="float: right;">first</div>
       <div style="margin-top: 2em;">second</div>
   </div>
</body>
```
jsFiddle Démo

Mise à JOUR 2: Après réflexion, et à la lecture des commentaires, je pense vraiment que overflow: hidden (ou autre chose que overflow: visible) sur le conteneur est la bonne solution. La seule exception où il n'a pas de travail pour moi, c'est sur le body élément, ce qui est très rare que cette situation de toute façon. Dans ces rares cas, vous pouvez essayer d'utiliser position: absolute; top: 0; right: 0; au lieu de flotter.

Une autre solution possible: j'ai aussi trouvé que la mise display: inline-block; width: 100%; sur body fonctionne effectivement.

jsFiddle Démo
- +1 pour le "un propre, idiomatiques façon d'éviter ce problème"
- Et pourquoi était-ce voté à la baisse? puis-je demander?
- Désolé, ne semble pas comme un "propre" solution pour moi. Cela fonctionne, mais il n'est pas très pratique, à moins qu'un élément supplémentaire est introduit.
- J'aimerais comprendre votre inquiétude à propos de l'introduction d'un élément nouveau, mais je ne l'ai pas fait. Avez-vous vérifié le Violon? Je serais heureux de faire mieux si vous avez des problèmes avec elle. J'ai comme l'apprentissage de la critique, de sorte s'il vous plaît partagez vos pensées.
- Je pensais vraiment que c'était la solution, mais ça ne fonctionne pas, le violon n', mais seulement parce que le jsfiddle résultat-lumière.css est l'ajout de certains corps de rembourrage (10px) - rembourrage et comme nous le savons, est un "remède" pour l'effondrement des marges.. 1px est assez pour qu'il fonctionne comme @eegg de la frontière-top solution, il semble qu'il n'est besoin d'un adaptateur supplémentaire de l'élément d'appliquer le dépassement de correctif.
- Merci pour cette clarification. Maintenant, je sens que je ne comprends pas quelque chose à propos de CSS :). Je vais étudier cette chose plus loin et de mettre à jour quand j'ai quelque chose, ou d'apprendre quelque chose de nouveau quand quelqu'un poste une bonne réponse.
- la vôtre est la bonne réponse, seulement de ne pas appliquer la body élément qui est hautement improbable, dans un scénario réel de toute façon.. débordement caché sur l'élément parent je.e ajouter un div conteneur (à l'exception du corps, qui est la racine de formatage contexte) fonctionne. Il est très improbable que vous voulez être flottant le premier élément de la source et de ne pas l'avoir il avoir un div conteneur de quelque sorte 😉
- Changé mon vote. Réglage overflow:hidden sur un "habillage" de l'élément n'est pas seulement une bonne solution à ce problème mais il est probablement déjà en usage commun pour la compensation des flotteurs.
- Merci. overflow: hidden's magie est très utile dans plusieurs situations.
- C'est comme la nouvelle clearfix ou quelque chose! 🙂
- display: inline-block; width: 100%; sur le corps a fonctionné pour moi. Pourquoi ne inline-block travail? Je ne comprends pas le raisonnement.
- C'est une bonne question, je voudrais le regarder, mais n'ont pas le temps maintenant. Hm, en pensant que nous sommes déjà sur un Q&Un site, peut-être que vous pourriez vous poser une question à ce sujet. Veuillez également envoyer le lien à votre question ici, car je suis aussi intéressé par la réponse :).
- Je préfère overflow: auto sur overflow: hidden que vous pourriez avoir un certain effet à l'intérieur de la div qui doit aller à l'extérieur (peut-être par rapport les éléments en position ou pseude éléments, peut-être que certaines box-shadow). En fait, toute autre valeur que visible devrait fonctionner. Tous les deux ne fonctionnent pas correctement, si la largeur et la hauteur ne sont pas fixes et que moins le contenu de l'.
InformationsquelleAutor kapa
2

Sur le parent div ajouter cette #parent {padding 1px 0; } ce fut un énorme problème pour moi et il m'a pris pour toujours de trouver une solution. J'ai vu sur un post de 2 ans et cela corrige l'effondrement.

InformationsquelleAutor user2127170
2

SOLUTION

ajouter overflow: auto; ou overflow: hidden; ou overflow: scroll; à la fois html et body tag.

SI VOUS VOULEZ SAVOIR POURQUOI

La création de bloc de mise en forme de contexte(BFC) sur body tag.

Pourquoi il ne fonctionne pas si j'ajoute overflow: hidden; seulement à body?

Voici pourquoi:

W3C#bloc de mise en forme

Les chars, les éléments en position absolue, bloc de conteneurs (par exemple inline-blocks, table de cellules, et de la table des légendes) qui ne sont pas de bloc de boîtes et de bloquer les boîtes avec 'débordement' autre qu 'visible' (sauf lorsque cette valeur a été propagée dans la fenêtre d'affichage) établir un nouveau bloc de mise en forme des contextes de leur contenu.

W3C#débordement:

Samu doit appliquer le 'débordement' propriété définie sur l'élément racine de la fenêtre d'affichage.

Lorsque l'élément racine est un HTML "HTML" élément ou d'un XHTML "html" de l'élément, et cet élément a un HTML "CORPS" élément ou d'un XHTML "corps" de l'élément de l'enfant, les agents utilisateurs doivent au lieu d'appliquer le "débordement" la propriété de le premier élément enfant à la fenêtre d'affichage, si la valeur de l'élément racine est 'visible'.

Le "visible" de la valeur lorsqu'il est utilisé pour la fenêtre d'affichage doit être interprété comme "auto".

L'élément dont la valeur est propagée doit avoir une valeur utilisée pour "dépassement de capacité" de "visible".

the first such child element et The element from which the value is propagated reportez-vous à body balise dans ce cas.

En d'autres termes, si vous ajoutez overflow: hidden; ou overflow: auto; ou overflow: scroll; à body alors que la valeur de html's overflow propriété est visible, la valeur de body's overflow propriété(hidden ou auto ou scroll) seront propagées à la fenêtre d'affichage. Ainsi, selon la première W3C devis, body ne serait pas établir un nouveau bloc de mise en forme de contexte.

Toutefois, si vous ajoutez overflow: hidden; ou overflow: auto; ou overflow: scroll; à html, le overflow valeur du 'corps' ne serait pas propagé et donc établir un nouveau bloc de mise en forme de contexte.
- Aucune réponse sauf celui-ci explique pourquoi débordement sur le corps n'a pas à établir de nouveaux bloc de mise en forme de contexte, je pense que la clé du problème.
InformationsquelleAutor medifle
1

Ajouter float: left; à la deuxième div.

violon
- Tout cela résout le problème, il pourrait ne pas être souhaitable dans la plupart des cas.
InformationsquelleAutor Jawad
1

Le W3C spécifications décrit ce à propos de l'effondrement des marges:

"Dans la présente norme, l'expression de l'effondrement des marges signifie que les marges adjacentes (pas de non-vide de contenu, le rembourrage, la ou les zones frontalières, ou à l'autorisation de les séparer) de deux boîtes ou plus (ce qui peut être à côté l'un de l'autre ou imbriquée) se combinent pour former une seule marge."

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

meilleure façon de faire face à un effondrement des marges est juste d'ajouter un pixel vers le haut ou le bas du rembourrage de l'élément qui a l'effondrement de la marge.

si la marge était de s'effondrer sur le dessus.. alors:
```
#element-with-collapsed-margin {
   padding-top:1px;
}
```
ou border-top de corriger ce ainsi
```
#element-with-collapsed-margin {
   border-top:1px solid transparent;
}
```
si votre marge du bas est effondré puis vous ajoutez padding-bottom:1px; ou border-top:1px solid transparent;

en gros toute la frontière ou de rembourrage sur le haut ou le bas va arrêter les marges s'effondrent lorsque vous ont-ils au-dessus de l'un l'autre, ou même lorsque vous avez les éléments imbriqués les uns des autres qui ont de la marge d'effondrement

bonne référence:

http://reference.sitepoint.com/css/collapsingmargins

..

InformationsquelleAutor Jonathan Marzullo
1

Un autre truc que vous pouvez utiliser lorsque overflow:hidden n'est pas adapté:
```
.clr:before, .clr:after {
    display: table;
    content: " ";
    clear: both;
    font-size: 0;
}
```
Cet extrait a pour effet secondaire de contenant tous les flotteurs ainsi.
- font-size:0 et un espace à l'intérieur de contenu n'est pas requis pour les navigateurs modernes. Testé que sur IE10, Firefox et Chrome.
- .clr:avant,.clr:après{display:table;content:"";clear:both} fonctionne dans Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 8+, selon nicolasgallagher.com/better-float-containment-in-ie
InformationsquelleAutor Henry Chan

Il peut être étrange, mais dans les nouvelles versions de google Chrome, et Mozilla, vous pouvez obtenir le comportement souhaité (première div est en haut à droite) par l'ajout de wrapper de div avec une bordure

<html>
  <body style="padding: 0; margin: 0;">
    <div style="border: 1px solid black">
        <div style="float: right;">first</div>
        <div style="margin-top: 2em;">second</div>
    </div>
  </body>
</html>

InformationsquelleAutor user2351934

Vous devez vous connecter pour publier un commentaire.

SOLUTION

SI VOUS VOULEZ SAVOIR POURQUOI

Pourquoi il ne fonctionne pas si j'ajoute overflow: hidden; seulement à body?

Pourquoi il ne fonctionne pas si j'ajoute `overflow: hidden;` seulement à `body`?