In dieser Frage jemand hatte ein Layout-Problem, weil sie zwei floated divs innerhalb eines nicht-floated div hatten. Ich schlug vor, float: left zu ihrem äußeren div hinzuzufügen, was das Problem behebt. Jemand anderes hat vorgeschlagen, overflow: hidden hinzuzufügen, was zu meiner Überraschung ebenfalls funktioniert hat.
Dies scheint überhaupt nicht der Zweck von overflow: hidden zu sein. Offensichtlich Überlauf: versteckt bewirkt, dass Elemente ihre Kinder irgendwie anders sehen. Was ich wirklich zu verstehen versuche, ist was dieser Unterschied ist. Intuitiv sollte es das Element nur kleiner machen, als es sonst sein würde, niemals größer und ich sehe nicht, warum es die Layout-Hierarchie beeinflussen würde.
Kann jemand erklären, warum dies das richtige / notwendige Verhalten ist oder ob das nur eine Browser-Eigenart ist? Ist ihre andere Facette zu der Überlaufeigenschaft, die ich vermisse? Ist jede Lösung besser als die andere?
Bearbeiten: Ich habe entdeckt, dass overflow: auto ebenfalls funktioniert, also scheint es nicht der Wert von overflow zu sein, der wichtig ist, nur dass er gesetzt ist. Ich verstehe immer noch nicht warum.
Ein Überlauf von allem außer visible erzeugt einen neuen Blockformatierungskontext, der bewirkt, dass Floats enthalten sind. Es ist Standardverhalten.
Schwimmer, absolut positioniert Elemente, Inline-Blöcke, Tabellenzellen, Tabellenbeschriftungen und Elemente mit "Überlauf" anders als "sichtbar" (außer wenn dieser Wert gewesen ist in das Ansichtsfenster propagiert) neue Blockformatierungskontexte.
In einem Block, der den Kontext formatiert, Felder sind nacheinander angeordnet, vertikal, beginnend an der Spitze eines enthaltender Block. Die Vertikale Abstand zwischen zwei Geschwisterboxen ist bestimmt durch die "Rand" -Eigenschaften. Vertikale Ränder zwischen benachbarten Blöcke in einem Block formatieren Kontextzusammenbruch.
In einem Blockformatierungskontext jeder Die linke äußere Kante der Box berührt die linke Seite Rand des umschließenden Blocks (z. B. Formatierung von rechts nach links, rechte Kanten berühren). Dies gilt auch in der Anwesenheit von Schwimmern (obwohl eine Box Zeilenfelder können aufgrund der schwebt), es sei denn, die Box legt ein neuer Blockformatierungskontext (in dem Fall die Box selbst werden kann schmaler wegen der Schwimmer).
Floating-Elemente entfernen sie in vielen Fällen aus dem normalen Layout . Es ist nicht genau wie oder ungleich position: absolute; darin. Blockelemente ignorieren häufig schwebende Elemente (einschließlich Blockelemente, die das Element enthalten), aber im Gegensatz zu position: absolute; -Elementen werden schwebende Elemente erkannt und von Inline-Elementen wie Text umschlossen.
Wenn das Wrapping-Element (div oder anders) ebenfalls floated ist, verhält es sich anders als float-Elemente, die es enthält. Wenn das Wrapper-Objekt auf overflow: hidden; gesetzt ist, muss es auch die enthaltenen Elemente unterschiedlich berücksichtigen. Meine Vermutung ist, es ist nur ein glücklicher Zufall, dass das Endergebnis hier scheint das gleiche zu sein. Keine Quirk oder Bug ... nur wie es funktioniert.