5 Lösungen für den CSS-Box-Zusammenbruch

Zunächst: Was ist ein Box-Collapse?

Elemente, die sich innerhalb der übergeordneten Box befinden sollten, befinden sich außerhalb.

Zweitens, warum fällt die Kiste zusammen?

Wenn das übergeordnete Element nicht auf eine ausreichende Größe eingestellt ist und das untergeordnete Element auf schwebend eingestellt ist, springt das untergeordnete Element über die Begrenzung des übergeordneten Elements (aus dem Dokumentfluss). Insbesondere wenn die Höhe des übergeordneten Elements automatisch ist und es keine anderen nicht schwebenden sichtbaren Elemente im übergeordneten Element gibt, wird die Höhe der übergeordneten Box direkt auf Null reduziert. Wir nennen dies CSS-Höhenreduzierung.

In der folgenden Abbildung sind die Boxen der beiden untergeordneten Elemente unten so eingestellt, dass sie jeweils links und rechts schweben, und die lange Box oben ist ausgeblendet.

ex:

3. Mehrere Lösungen für den Box-Collapse

Die einfachste, direkteste und gröbste Methode besteht darin, die Boxgröße fest zu codieren und für jede Box eine feste Breite und Höhe festzulegen, bis sie passt. Der Vorteil dieser Methode besteht darin, dass sie einfach und bequem ist, eine gute Kompatibilität aufweist und für Layouts geeignet ist, bei denen nur wenige Inhalte geändert werden und kein Boxlayout erforderlich ist. Der Nachteil besteht darin, dass sie nicht anpassungsfähig ist und die Größe des Browserfensters sich direkt auf das Benutzererlebnis auswirkt.

Fügen Sie dem äußeren übergeordneten Feld Floats hinzu, um es vom Standarddokumentfluss zu trennen. Diese Methode ist praktisch, aber nicht sehr seitenlayoutfreundlich und schwierig zu verwalten.

Fügen Sie der übergeordneten Box die Überlaufeigenschaft hinzu.

1. overflow:auto; kann dazu führen, dass Bildlaufleisten angezeigt werden, die das Erscheinungsbild beeinträchtigen.
2. overflow:hidden; kann dazu führen, dass der Inhalt unsichtbar ist.

Bringen Sie unten in der übergeordneten Box einen Räumschwimmer an. Die einfachsten sind:

<br Stil="klar:beide;"/>

Viele Leute lösen dieses Problem, wir empfehlen es jedoch nicht, da dadurch unnötige redundante Elemente eingeführt werden.

Die After-Pseudoklasse löscht den Float.

Das After-Pseudoelement der äußeren Box legt die Clear-Eigenschaft fest.

#übergeordnet:nach{
                klar: beides;
                Inhalt: "";
                Breite: 0;
                Höhe: 0;
                Anzeige: Block;
                Sichtbarkeit: versteckt;
            }

Dies ist eine reine CSS-Methode, um das durch Floating verursachte Zusammenfallen von Boxen zu beheben. Es werden keine redundanten Elemente eingeführt. Diese Methode wird empfohlen, um das Zusammenfallen von CSS-Boxen zu beheben.

Hinweis: Obwohl die fünfte Methode gut ist, ist sie nicht mit niedrigeren IE-Versionen kompatibel. Welche konkrete Lösung gewählt werden soll, kann je nach tatsächlicher Situation entschieden werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.