Warum verändert die Einstellung des Überlaufs das Layout der untergeordneten Elemente?

Question

In diesem Frage Jemand hatte ein Layout-Problem, weil er zwei fließende Divs innerhalb eines nicht fließenden Divs hatte. Ich schlug vor, Folgendes hinzuzufügen float: left auf ihr äußeres Div, wodurch das Problem behoben wird. Jemand anderes schlug vor, Folgendes hinzuzufügen overflow: hidden was zu meiner Überraschung auch funktionierte.

Das scheint überhaupt nicht der Zweck von overflow: hidden . Eindeutig overflow: hidden bewirkt, dass Elemente ihre Kinder irgendwie anders sehen. Was ich wirklich versuche zu verstehen, ist was dieser Unterschied ist. Intuitiv sollte es das Element nur kleiner machen als es sonst wäre, niemals größer, und ich sehe nicht, warum es die Layout-Hierarchie beeinflussen würde.

Kann jemand erklären, warum dies korrektes/notwendiges Verhalten sein würde oder ob dies nur eine Browser-Macke ist? Gibt es eine weitere Facette der Überlaufeigenschaft, die ich übersehe? Ist eine der beiden Lösungen besser als die andere?

Edit: Ich habe eine Einstellung entdeckt overflow: auto funktioniert auch, also scheint es nicht der Wert von overflow zu sein, der wichtig ist, sondern nur, dass er gesetzt ist. Ich verstehe immer noch nicht, warum.

Answer 1

Überlauf von etwas anderem als visible erstellt einen neuen Blockformatierungskontext, in dem Gleitkommazahlen enthalten sind. Das ist das Standardverhalten.

Schwimmer, absolut positioniert Elemente, Inline-Blöcke, Tabellen-Zellen, Tabellenüberschriften, und Elemente mit overflow' anders als 'visible' (es sei denn, dieser Wert wurde an das Ansichtsfenster weitergegeben wurde) neue Kontexte für die Blockformatierung.

In einem Blockformatierungskontext werden die Felder nacheinander angeordnet, vertikal, beginnend am oberen Rand eines enthaltenden Blocks. Der vertikale Abstand zwischen zwei geschwisterlichen Boxen wird wird durch die Eigenschaften des "Randes" bestimmt. Vertikale Ränder zwischen benachbarten Blockrahmen in einem Blockformatierungs Kontext kollabieren.

In einem Blockformatierungskontext wird jede die linke Außenkante jeder Box die linke Rand des enthaltenen Blocks (bei Rechts-nach-Links-Formatierung berühren die rechten Kanten berühren). Dies gilt selbst bei Vorhandensein von Floats (obwohl die Box Zeilen eines Rahmens aufgrund der Floats schrumpfen können), es sei denn, der Rahmen erstellt eine neuen Blockformatierungskontext (in diesem Fall Fall kann der Rahmen selbst aufgrund der Pufferzeiten schmaler werden).

Answer 2

Durch das Verschieben von Elementen werden diese aus dem normalen Layout entfernt. in vielen Fällen . Es ist nicht genau wie oder anders als position: absolute; darin. Blockelemente neigen dazu, schwebende Elemente zu ignorieren (einschließlich Blockelementen, die das Element enthalten), aber im Gegensatz zu position: absolute; Elemente, werden fließende Elemente erkannt und von Inline-Elementen wie Text umschlossen.

Wenn das umhüllende Element (div oder anderweitig) auch schwebend ist, verhält es sich in Bezug auf die darin enthaltenen schwebenden Elemente anders. Wenn das umhüllende Element auf overflow: hidden; zwingt sie dazu, auch die darin enthaltenen Gegenstände anders zu betrachten. Ich vermute, dass es nur ein glücklicher Zufall ist, dass das Endergebnis hier dasselbe zu sein scheint. Das ist keine Eigenart oder ein Fehler... es funktioniert einfach so.