Gemäß der CSS-Spezifikation werden Floats aus dem Dokumentfluss verschoben und haben keinen Einfluss auf das Layout von Blockboxen, sondern nur auf die Anordnung von Inline-Boxen (normalerweise Text). Wenn seine Höhe den enthaltenden Container überschreitet, wird der allgemeine übergeordnete Container daher nicht automatisch gedehnt, um das schwebende Element zu schließen. Aber manchmal brauchen wir dieses automatische Schließverhalten.
Eine Möglichkeit hierfür besteht darin, eine zusätzliche Beschriftung in den übergeordneten Container einzufügen und deutlich zu machen, dass der übergeordnete Container erweitert werden soll. Diese Methode hat eine gute Browserkompatibilität und keine Probleme. Der Nachteil besteht darin, dass sie zusätzliche (und normalerweise semantische) Tags erfordert, weshalb sie mir persönlich nicht gefällt.
Später gab es eine neue Möglichkeit, die :after-Pseudoklasse zu verwenden, um ein Element zum Löschen von Floats dynamisch einzubetten. Diese Methode hat das gleiche Prinzip wie die vorherige, außer dass der zusätzliche Inhalt mit CSS generiert wird, der IE jedoch nicht support :after und musste viele Hacks machen. Diese Methode ist allgemein kompatibel, kann jedoch durch verschiedene Hacks mit verschiedenen Browsern umgehen. Gleichzeitig kann sichergestellt werden, dass der HTML-Code relativ sauber ist, sodass er immer noch häufiger verwendet wird.
Später stellte jemand fest, dass das Festlegen des Überlaufs des übergeordneten Containers auf einen anderen Wert als „sichtbar“ das Floating-Element in einem standardkonformen Browser schließen kann. Daher ist diese Methode genauso gültig wie die vorherige Methode führt eine andere Verarbeitung durch (insbesondere das Auslösen des Layouts). Der Unterschied besteht darin, dass der Überlauf nicht so problematisch ist wie der :after-Überlauf. Er kann auch einige kleinere Konflikte verursachen.
Vor der Verwendung von Overflow gab es eine andere Möglichkeit, Float zu verwenden, nämlich den übergeordneten Container schweben zu lassen. Dabei wird eine Eigenschaft von Floating-Elementen ausgenutzt: Floating-Elemente schließen Floating-Elemente. Diese Methode liefert gute Ergebnisse in IE/Win- und standardkompatiblen Browsern, aber der Nachteil liegt auch auf der Hand: Der übergeordnete Container schwebt möglicherweise nicht, nur weil er schweben möchte. Schließlich ist das Schweben ein besonderes Verhalten, und manchmal ist dies beim Layout nicht der Fall richtig. Es ist auch normal, es schweben zu lassen. Obwohl Float-Elemente in IE- und standardkompatiblen Browsern geschlossen werden können, ist das Prinzip anders. In IE/Win ist Float das gleiche wie beim vorherigen Das Prinzip des Überlaufs ist bei dieser Methode dasselbe, was zu einem „Formatierungsbereich auf Blockebene“ führt. Dies ist ein in der CSS-Spezifikation erwähntes Phänomen. Eine seiner Eigenschaften besteht darin, dass der interne Float automatisch geschlossen wird . Element.
Laut Spezifikation führen die folgenden Elementtypen zu einem Formatierungsbereich auf Blockebene:
● Schwebende Elemente können entweder links oder rechts sein.
● Absolut positionierte Elemente.
● Inline-Block-Element, aber dieser Gecko unterstützt es derzeit nicht.
● Elemente vom Typ Tabellenzelle, Tabelle, Tabellenkopfgruppe, Tabellenzeile usw. sind ebenso akzeptabel wie Inline-Tabellen (von Gecko nicht unterstützt), da sie alle indirekt eine anonyme Tabelle generieren. Zelle.
● Überlauf ist ein Element, dessen Wert nicht sichtbar ist.
Daher stellt sich heraus, dass wir in standardkonformen Browsern auch so viele Methoden zum Schließen eines schwebenden Elements haben können, dass nur CSS und nichts anderes erforderlich ist. Neben dem Überlauf hat das oben Gesagte übrigens den zusätzlichen Effekt, dass die Breite des übergeordneten Containers automatisch verkleinert wird.
Für IE/Win gibt es ein eigenes System: Layoutelemente schließen automatisch schwebende Elemente. Sie werden feststellen, dass es viele Ähnlichkeiten mit der Formatierung auf Blockebene gibt Bereich oben:
● Floating-Elemente ● Absolut positionierte Elemente ● display:inline-block
● Zoom
● Breite/Höhe
● overflow/overflow-x/overflow-y [Neu in IE7]
● maximale/minimale Breite/Höhe [Neu in IE7]
Aus den oben genannten Gründen gibt es viele Möglichkeiten, schwebende Elemente im IE zu schließen, und natürlich haben sie alle ihre Einschränkungen. Sie haben entweder Nebenwirkungen oder verwenden nicht standardmäßige Attribute (die die Überprüfung nicht bestehen können).
Eine weitere zu erwähnende Sache ist display:inline-block. Der eigentliche Effekt besteht lediglich darin, einem Element heimlich ein Layout hinzuzufügen. Standardkonforme Browser erkennen dieses Attribut jedoch nicht Für den Browser müssen Sie die Anzeige auf die Standardeinstellungen zurücksetzen. Hier liegt ein Fehler im IE vor, wenn Sie zuerst display:inline-block definieren und dann die Anzeige wieder auf Block setzen (diese beiden Anzeigen müssen nacheinander in zwei CSS-Anweisungen platziert werden, um eine Wirkung zu erzielen), dann wird das Layout dies tun nicht verschwinden, und gleichzeitig wird das Layout nicht verschwinden. Es hat keine Auswirkungen auf andere Browser, daher ist dies vorerst auch eine gute Möglichkeit, das Layout auszulösen:
| .gainlayout{display:inline-block;} .gainlayout{display:block;} |
Daher gibt es viele Möglichkeiten, schwebende Elemente in allen Browsern zu schließen. Die Verwendung dieser CSS-Eigenschaften erfordert auch eine flexible Anwendung von bedingten Kommentaren zurück und klar verwenden. Es kann verwendet werden.