J'ai demandé à ce sujet sur la liste de diffusion sur votre nom; le fil peut être trouvé ici. En résumé, cela a à voir avec le défilement de contenu pour la plupart:
Fondamentalement, parce que si la spec n'ai pas dit cela, puis d'avoir flotteurs se croisent avec quelque chose qui est de défilement serait nécessaire que le navigateur de renvoyer à la ligne (autour de l'intrusion des flotteurs) le contenu de l'élément déroulant à chaque fois qu'elle défile. C'est techniquement ce que
CSS 2.0 requis, mais il n'a jamais été mis en œuvre, et il aurait été un énorme problème pour la vitesse de défilement.
-David
Très probablement, il fait référence à du contenu défilant dans une boîte qui peut se produire à l'extérieur de la flotte du parent mais intersection avec le flotteur. Je ne pense pas que ce soit lié à la conversion de contenu autour d'un flotteur à l'intérieur d'une zone déroulante contenant, comme c'est déjà le cas, naturellement, plus le radeau clip dans le récipient et faites défiler le long avec le reste de son contenu, de toute façon.
Enfin pour moi c'est logique. En fait, je vais vous donner un exemple, ici, alors j'espère qu'il fait sens pour vous et personne d'autre qui peut-être vous demandez-vous. Imaginez un scénario impliquant deux cases avec la même hauteur fixe et overflow: visible (valeur par défaut), dont la première contient un flotteur qui s'étend au-delà de son parent hauteur:
<div>
<p>...</p>
</div>
<div>
<p>...</p>
<p>...</p>
</div>
/* Presentational properties omitted */
div {
height: 80px;
}
div:first-child:before {
float: left;
height: 100px;
margin: 10px;
content: 'Float';
}
![]()
Remarque la similitude à l'un des exemples donnés dans la section 9.5. La deuxième zone est ici simplement montré débordant de contenu pour les besoins de cette réponse.
C'est bien car le contenu ne sera jamais défilé, mais quand overflow est réglé sur autre chose que de l' visible, qui entraîne le contenu non seulement d'être coupé par les limites de la zone, mais aussi à devenir de défilement. Si la deuxième zone a overflow: auto, c'est ce qu'il pourrait ressembler a un navigateur de mise en œuvre de l'original CSS2 spec:
![]()
En raison du flotteur, en essayant de faire défiler le contenu serait la cause de la navigateur pour avoir de la remballer afin de ne pas être masquées par le flotteur (et ce qui doit arriver à la partie qui permet de faire défiler de haut bord?). Il serait probablement ressembler à quelque chose comme ça quand défiler vers le bas:
![]()
Le hic ici est que le navigateur a pour remballer le contenu à chaque fois qu'il repeint pendant le défilement. Pour les navigateurs qui sont capables de pixels en fonction de défilement lisse - qui est-à-dire, tous d'entre eux - je ne vois pas pourquoi ce serait une performance catastrophe!
Mais c'est pour quand l'utilisateur peut faire défiler le contenu, non? Ce serait logique pour overflow: auto et overflow: scroll, mais que diriez - overflow: hidden?
Eh bien, une idée fausse commune est que l'un récipient avec de l' overflow: hidden cache simplement le contenu par clipsage et ne peuvent pas être affichés. Ce n'est pas tout à fait vrai:
Pendant le défilement de l'INTERFACE utilisateur n'est pas fourni, le contenu est toujours le défilement de la programmation, et un certain nombre de pages d'effectuer de tels défilement (par exemple en fixant scrollTop sur l'élément concerné).
-Boris
En effet, c'est ce qu'il regarde comme si la deuxième zone a été définie pour l' overflow: hidden , puis défile vers le bas avec le code JavaScript suivant:
var div = document.getElementsByTagName('div')[1];
div.scrollTop = div.scrollHeight;
![]()
De nouveau, notez que le contenu devrait être rewrapped pour éviter d'être obscurci par le flotteur.
Même si ce ne serait pas aussi douloureux pour la performance en avait défilement de l'INTERFACE utilisateur disponible, je crois qu'ils ont fait des boîtes avec tout overflow valeur autre que visible générer un nouveau BFC principalement par souci de cohérence.
Et donc, ce changement a été apporté dans CSS2.1, documentée ici. Maintenant, si vous appliquez un overflow valeur autre que visible seulement à la seconde zone de, ce qu'est un navigateur n'est de pousser l'ensemble de la zone de côté pour faire de la place pour le flotteur, parce que la boîte crée un nouveau bloc de mise en forme de contexte qui entoure son contenu, au lieu de s'écouler à travers le flotteur. Ce comportement particulier est spécifié dans le paragraphe:
La zone de bordure d'un tableau, d'un bloc remplacé élément ou un élément dans le flux normal, qui établit un nouveau bloc de mise en forme de contexte (par exemple un élément avec 'débordement' autre qu 'visible') ne doivent pas se superposer à la marge de la boîte de flotteurs dans le même bloc de mise en forme de contexte comme l'élément lui-même. Si nécessaire, des mises en œuvre de claire le dit élément en le plaçant au-dessous de ce qui précède, les chars, mais peut placer adjacentes à ces flotteurs si l'espace est suffisant. Ils peuvent même faire de la zone de bordure dudit élément plus étroit que défini par l'article 10.3.3. CSS2 ne permet pas de définir quand un UA peut mettre dit élément à côté du flotteur ou par la façon dont beaucoup dit élément peut devenir plus étroit.
Voici à quoi il ressemble avec overflow: auto par exemple:
![]()
Notez qu'il n'y a pas de jeu; si la deuxième zone a clear: left ou clear: both il serait poussé vers le bas, non pas sur le côté, qu'elle a créé son propre BFC.
Si vous appliquez overflow: auto à la première boîte au lieu de cela, le flotteur est coupé dans sa boîte contenant avec le reste du contenu, en raison de sa hauteur fixe, qui est fixé à l' 80px dans l'exemple de code donné ci-dessus:
![]()
Si vous revenez à la première zone de height: auto (la valeur par défaut), soit par la substitution ou de retrait de l' height: 80px déclaration à partir de ci-dessus, il s'étend à la hauteur du flotteur:
![]()
Cela arrive à être de nouveau dans CSS2.1 ainsi, en ce qu'un élément avec height: auto qui génère un nouveau bloc de mise en forme de contexte (c'est à dire un bloc de mise en forme racine de contexte) va s'étirer verticalement à la hauteur de sa flotte, et pas juste suffisante pour contenir ses flux de contenu à la différence d'une boite normale. Les modifications sont documentées ici et ici. Le changement de leader sur le côté-effet de la réduction de la boîte de sorte qu'il ne coupe pas le flotteur est documenté ici.
Dans ces deux cas, peu importe ce que vous faites pour la deuxième case, il ne sera jamais affecté par le flotteur, car il a été restreinte par les limites de son conteneur.
