Detaillierte Erläuterung der Gründe und Lösungen für schwebende Elemente, die die Höhe ihrer übergeordneten Elemente reduzieren

Schwebende Elemente führen dazu, dass ihre übergeordneten Elemente in der Höhe zusammenfallen. Wir begegnen häufig einer Situation, in der wir nach dem Einstellen eines Elements auf Schweben float:left/right; feststellen, dass die Hintergrundfarbe des übergeordneten Elements verschwindet, wenn das übergeordnete Element des Elements eine Hintergrundfarbe hat. Wenn das übergeordnete Element einen Rahmen hat, kann das schwebende Element den Rahmen nicht erweitern.

Aus den beiden obigen Bildern können wir ersehen, dass nach dem Hinzufügen der schwebenden Elemente die Li-Elemente gemäß den Regeln horizontal angeordnet werden, das übergeordnete Element jedoch verschwindet.

Fügen Sie dem übergeordneten Element einen 5px breiten Rand hinzu. Nachdem das li-Element schwebt, wird der Rand nicht durch den Inhalt gestreckt.

Im ersten Beispiel scheint das übergeordnete Element zu verschwinden. Im zweiten Beispiel stellt sich jedoch heraus, dass das übergeordnete Element nicht verschwindet, sondern die Höhe als 0 berechnet wird. Um dieses Problem zu erklären, müssen wir auf die Eigenschaften schwebender Elemente zurückkommen. „Wenn ein Element auf schweben eingestellt ist, verlässt es automatisch den Dokumentfluss.“ In die Umgangssprache übersetzt bedeutet dies, dass das Element nach dem Schweben nicht mehr der Zuständigkeit des gesamten Dokumentflusses unterliegt, sodass seine vorherige Höhe im übergeordneten Element beim Schweben nicht mehr vorhanden ist und das übergeordnete Element zu diesem Zeitpunkt davon ausgeht, dass es keinen Inhalt enthält (die Voraussetzung ist, dass für das übergeordnete Element keine feste Höhe eingestellt ist. Wenn das übergeordnete Element selbst eine feste Höhe hat, tritt diese Situation nicht auf).

Lösung:

1. Fügen Sie dem übergeordneten Element auch float hinzu. Dadurch können das übergeordnete Element und das untergeordnete Element aus dem Dokumentfluss herausschweben und sicherstellen, dass sich das untergeordnete Element innerhalb des übergeordneten Elements befindet. Auf diese Weise kann sich das übergeordnete Element an die Höhe des untergeordneten Elements anpassen. Diese Methode hat jedoch einen Nachteil, der sich definitiv auf die Anordnung der Elemente nach dem übergeordneten Element und sogar auf das Layout auswirkt.
2. Geben Sie dem übergeordneten Element eine feste Höhe. Diese Methode eignet sich für Situationen, in denen die Höhe des untergeordneten Elements bekannt und festgelegt ist.
3. Fügen Sie ein Element auf Blockebene hinzu und legen Sie für dieses Element clear:both; fest, um den Float zu löschen. Diese Lösung wurde vor langer Zeit verwendet. Erstellen Sie ein neues leeres Div und setzen Sie für dieses Div „clear: both“. Dies fügt zweifellos bedeutungslose Tags hinzu. Es ist nicht gut, zu viele solcher Tags auf einer großen Seite zu haben.
4. Fügen Sie overflow：hidden； [Detaillierte Erklärung später]
5. Floats durch Pseudoklasse ::after löschen [detaillierte Erklärung später]

Überlauf: versteckt;

• Überlauf verbergen. Wenn der Inhalt über sein übergeordnetes Element hinausgeht, können Sie dieses Attribut und diesen Wert verwenden, um den überlaufenden Teil abzuschneiden und die Seite schöner zu gestalten.
• Löschen Sie den Float. Wenn das untergeordnete Element schwebt, fügen Sie dem übergeordneten Element overflow: hidden hinzu. Gemäß seiner ersten Eigenschaft sollte der Teil des untergeordneten Elements, der den Grenzwert überschreitet, abgeschnitten werden. Da das untergeordnete Element jedoch schwebt, kann es nicht abgeschnitten werden. Daher kann das übergeordnete Element seine Höhe nur erhöhen, um das untergeordnete Element zu umschließen, sodass das übergeordnete Element eine Höhe hat und diese Höhe an das untergeordnete Element angepasst ist, sodass das schwebende untergeordnete Element in das übergeordnete Element aufgenommen wird.

::nach Pseudoklasse

Die Verwendung von Pseudoklassen zum Löschen von Floats hat dieselbe Wirkung wie das Erstellen eines leeren Div und das Festlegen auf „clear: both;“, mit dem Unterschied, dass die Pseudoklassen anstelle des leeren Div-Elements verwendet werden.

<div Klasse="Box">
    <div class="son">Ich bin ein schwebendes untergeordnetes Element</div>
</div>

.Kasten {
    Breite: 400px;
    Hintergrund: #F00;
}
.Sohn {
    schweben: links;
}
.son::nach {
    Inhalt:"";
    löschen: beides;/*schwebendes löschen*/
    display:block;/*Stellen Sie sicher, dass das Element ein Blockelement ist*/
}

Damit ist dieser Artikel über die Gründe und Lösungen, warum das schwebende Element dazu führt, dass die Höhe seines übergeordneten Elements abnimmt, abgeschlossen. Weitere Informationen zum Abnehmen der Höhe des übergeordneten Elements finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!