DivCSS-Erfahrung: Drei praktische CSS-Methoden zum Löschen von Floats

Bei der Verwendung des DivCSS-Webseitenlayouts werden häufig Floats verwendet. Es gibt viele Einführungen zum Löschen von Floats. Das Löschen von Floats ist ein Muss, und das jederzeitige Löschen von Floats aus übergeordneten Elementen gilt als eine der guten Gewohnheiten beim Schreiben von CSS.

Schauen wir uns das heutige Tutorial an. Dies ist ein schwebender Quellcode, der nicht gelöscht wurde. Sie können den hellgelben Hintergrund des übergeordneten Elements nicht sehen, wenn Sie den Code ausführen.


Wie in der Abbildung vor dem Löschen des Schwimmers gezeigt:



1. Verwenden Sie leere Etiketten, um Schwimmer zu löschen

Eine Methode, die ich seit langem verwende, besteht darin, dass das leere Tag ein div-Tag oder ein P-Tag sein kann. Ich bin es gewohnt, <P> zu verwenden, was kurz genug ist. Viele Leute verwenden auch <hr>, aber sie müssen nur den Rand dafür freimachen, aber theoretisch kann es jedes beliebige Tag sein. Diese Methode besteht darin, ein solches Tag zum Löschen von Float hinzuzufügen, nachdem alle Floating-Elemente innerhalb des Floating-Elternelements gelöscht werden müssen, und den CSS-Code dafür zu definieren: clear:both. Der Nachteil dieses Ansatzes ist die Hinzufügung bedeutungsloser Strukturelemente.


2. Verwenden Sie das Überlaufattribut

Diese Methode behebt effektiv den Nachteil, unbeabsichtigten Code hinzufügen zu müssen, indem Floats durch leere Label-Elemente gelöscht werden. Um diese Methode zu verwenden, müssen Sie nur die CSS-Eigenschaft „overflow:auto“ in dem Element definieren, dessen Floating gelöscht werden soll, und fertig! „zoom:1“ dient der Kompatibilität mit IE6.


3. Verwenden Sie es nach dem Pseudoobjekt, um klar zu schweben

Diese Methode gilt nur für Nicht-IE-Browser. Spezifische Schreibmethoden finden Sie in den folgenden Beispielen. Bitte beachten Sie bei der Verwendung die folgenden Punkte. 1. Bei dieser Methode muss height:0 für das Pseudoobjekt festgelegt werden, das das schwebende Element löschen muss, andernfalls ist das Element mehrere Pixel höher als der tatsächliche Wert. 2. Das Inhaltsattribut ist erforderlich, sein Wert kann jedoch sein leere, blaue ideale Diskussion Bei dieser Methode wird der Wert des Inhaltsattributs auf „.“ gesetzt, aber ich habe festgestellt, dass es auch möglich ist, es leer zu lassen.


Wie in der Abbildung nach dem Clear Floating gezeigt:


Jede dieser drei Methoden hat Vor- und Nachteile, und Sie sollten bei der Verwendung die beste auswählen. Im Vergleich dazu ist die zweite Methode vorzuziehen.