Viele Menschen haben sich mit dem Problem des Schließens schwebender Elemente befasst, aber die Lösungen sind unterschiedlich und nicht jede Methode ist perfekt. Das Schließen von Floating-Elementen (oder das Löschen von Floats) ist ein häufig auftretendes Problem im Web-Standarddesign. Daher möchte ich hier einige häufig verwendete Methoden zusammenfassen und ihre Benutzerfreundlichkeit und anwendbaren Umgebungen vergleichen. Wenn Sie einen besseren Weg haben, bringen Sie ihn bitte zur Diskussion.

Der einfachste Fall besteht darin, dass wir ein kleines Div-Element mit fester Breite (z. B. Navigation, Referenz usw.) zusammen mit anderen Elementinhalten in ein großes Div einfügen. Zum Beispiel der folgende Code:

Wir können einen Breitenwert (z. B. 20 %) für „#inner“ festlegen. Da div jedoch ein Element auf Blockebene ist, kann der Inhalt dahinter, selbst wenn wir die Breite festlegen, nur in der nächsten Zeile angezeigt werden, sofern wir dies nicht tun Geben Sie ihm eine Float-Eigenschaft (entweder Float nach links oder Float nach rechts). Dann wird zu diesem Zeitpunkt das oben erwähnte Problem auftreten.

Dies stellt kein Problem dar, wenn „#inner“ eine kleinere Breite und Höhe als „#outer“ hat.

Wenn jedoch die Höhe von „#inner“ die Höhe von „#outer“ überschreitet, übersteigt die Unterseite von „#outer“. Dies liegt daran, dass, nachdem wir das Float-Attribut für „#inner“ festgelegt haben, es aus dem Textfluss ausbricht und „#outer“ der Änderung nicht folgt, egal wie sich Breite und Höhe ändern.

Lösung:

1) Zusätzliche Tag-Methode

Die erste und vom W3C empfohlene Methode ist die Verwendung zusätzlicher Tags. Bei dieser Methode wird am Ende des Inhalts ein leeres Tag hinzugefügt. Ein typischer Ansatz ist die Verwendung von etwas wie:

Oder verwenden

Diese Methode erzwingt die Erweiterung des äußeren Containers durch Hinzufügen eines HTML-Elements. Allerdings fügt diese Methode zusätzliche Tags hinzu und lässt die HTML-Struktur weniger prägnant aussehen.

Hinweis: Ich habe festgestellt, dass
schwebende Elemente löschen, aber nicht schließen kann. Dieses Problem besteht in Firefox nicht ? !

2) Verwenden Sie die After-Pseudoklasse,

um am Ende des angegebenen aktuellen Inhalts mithilfe der After-Pseudoklasse und der Inhaltsdeklaration neuen Inhalt hinzuzufügen. Ein gängiger Ansatz besteht darin, einen „Punkt“ hinzuzufügen, da dieser kleiner und weniger auffällig ist. Dann verwenden wir es, um den Float zu löschen (das Float-Element zu schließen) und den Inhalt auszublenden:
#outer:after{
Inhalt:".";
Höhe:0;
Sichtbarkeit:versteckt;
Anzeige:Block;
klar:beide;

Das Seltsame ist, dass Internet Explorer 6 und niedriger in Windows die After-Pseudoklasse in CSS 2.1 nicht unterstützen, Internet Explorer in Mac jedoch normal verwendet werden kann, sodass wir uns separat mit Win/IE befassen müssen. Unter den vielen Methoden zur Unterscheidung zwischen Internet Explorer in Win und Mac ist die am häufigsten verwendete Methode der Holly-Trick, CSS-Code:
/* Dieser Code kann nur von IE/Win gesehen werden*/
CSS-Regeln
/*End Hack */

Der obige Code enthält zwei Kommentarzeilen und am Ende der ersten Zeile erscheint ein Backslash (). Internet Explorer auf dem Mac geht davon aus, dass der Kommentar noch nicht beendet ist, und fährt daher fort, bis der Es erscheint ein vollständiges „*/“ und alle Zeichen in der Mitte werden als Kommentare betrachtet, aber IE/Win betrachtet nur die erste und dritte Zeile als Kommentare und die mittleren sind gültige Codes. Das unterscheidet den IE also auf verschiedenen Plattformen.

Basierend auf den oben genannten Prinzipien können Sie zum Bereinigen von Floats im IE 6 unter Windows den folgenden Code verwenden:

#outer {
display:inline-block;
}
/* Holly Hack Begine */
* html #outer {
Höhe: 1 %;
}
#outer {
Anzeige:Block;
}
/* Hack beenden */

PS: Wenn Sie IE6/Mac-Benutzer nicht in Betracht ziehen, müssen Sie nur * html #outer {height:1%;} schreiben.
Darüber hinaus scheint display:inline-block in Internet Explorer 7 nicht gut zu funktionieren. Verwenden Sie also die umfassendsten Hack-Tricks.

3) Externe Elemente schweben lassen Die Float-in-Float-

Methode besteht darin, das „#outer“-Element (nach links oder rechts) zu schweben.

Ein weiteres durch diese Methode verursachtes Problem besteht jedoch darin, dass das nächste Element neben „#outer“ von „#outer“ beeinflusst wird und sich seine Position ändert. Daher müssen Sie bei der Verwendung dieser Methode vorsichtig sein. Es besteht die Möglichkeit, alle Elemente auf der Seite zu schweben und schließlich ein geeignetes aussagekräftiges Element (z. B. eine Fußzeile) zu verwenden, um unnötiges Markup zu reduzieren, aber zu viele Floats erhöhen die Schwierigkeit des Layouts.

4) Setzen Sie den Überlauf auf „hidden“ oder „auto“.

„

auto“, um auch Floats zu bereinigen.

Seien Sie jedoch vorsichtig, wenn Sie einen Überlauf verwenden, da dieser die Browserleistung beeinträchtigt. Darüber hinaus kann das einfache Festlegen des Überlaufs in Internet Explorer 6 nicht effektiv gelöscht werden (das schwebende Element schließen). Sie müssen auch die Dimension „#outer“ angeben, d. h. entweder eine Breite oder eine Höhe dafür angeben :
#outer {
Überlauf:auto;
Breite: 100 %;
}

Hinweis: Wenn Sie diese Methode zum Löschen von Floats (Schließen von Floating-Elementen) unter IE5/Mac verwenden möchten, müssen Sie das Overflow-Attribut auf „hidden“ setzen.

Vergleichen Sie und entscheiden Sie,

welche der vier Methoden die beste ist? Erstens wird die Verwendung der After-Pseudoklasse nicht empfohlen. Im Vergleich zu den anderen drei Methoden ist der Holly-Trick etwas zu umständlich und schwer zu beherrschen. Der Holly-Trick, den ich oben erwähnt habe, ist nicht nur ein Problem im IE/. Wenn:hover erscheint, wird es auch andere Probleme geben, daher haben wir Attribute wie Inline-Block hinzugefügt, was bedeutet, dass diese Methode mehr Unsicherheit aufweist. Empfohlen für Leute, die „sauber“ im Umgang mit Code sind und über hohe technische Fähigkeiten verfügen.

Dann können tatsächlich die anderen drei Methoden in Betracht gezogen werden. Die Verwendung eines Überlaufs kann jedoch Auswirkungen auf die Seitenleistung haben, und diese Auswirkung ist ungewiss. Es

wird empfohlen, Ihre Seite in mehreren Browsern zu testen und zusätzliche Tags zum Löschen von Floats zu verwenden (Float-Element schließen). vom W3C. Ob Sie
-Elemente oder leere