Clear Floating ist etwas, dem jeder begegnet, der Seiten erstellt, aber kann es jeder klar kennen und umfassend verstehen? Deshalb habe ich einen Artikel wie diesen geschrieben, sobald ich etwas Freizeit hatte. Ich kann zwar nicht alles abdecken, aber im Grunde kann ich jedem beibringen, was ich weiß.
Werfen wir einen groben Blick darauf, wie viele Methoden es zum Löschen von Floats gibt (ich werde nicht über die Verwendung von zoom:1 im IE schreiben, aber ich werde im nächsten Thema darüber schreiben). Entsprechende DEMO
- Verwenden Sie pseudo-class:after, um die Pseudoklassenebene mit einer Höhe von Null für die anschließende leere Steuerung zu löschen.
- Verwenden Sie CSS overflow:auto, um die Höhe zu unterstützen
- Verwenden von CSS overflow:hidden, um seltsame Anpassungen zu erzeugen
- Verwenden Sie display:table, um das Objekt in eine Tabellenform umzuwandeln
- Verwenden Sie das div-Tag und das clear-Attribut von CSS
- Verwenden Sie das br-Tag und das klare Attribut von CSS
- Verwenden Sie das br-Tag und sein eigenes HTML-Clear-Attribut
Auf den ersten Blick können beide das Problem lösen; sie haben jedoch ihre eigenen Vor- und Nachteile. (Einzelkorrespondenz)
- Die Semantik der Vorteilsstruktur ist völlig korrekt und es werden keine weiteren seltsamen Probleme auftreten.
Nachteile Unsachgemäße Wiederverwendungsmethoden können leicht zu einem starken Anstieg des Codevolumens führen.
Es wird empfohlen, es zu verwenden, wenn die äußerste Schicht leicht schwimmt, oder für Personen, die die modulare Wiederverwendungsmethode verstehen. - Vorteile : Die Struktursemantik ist völlig korrekt und die Codemenge ist sehr gering.
Nachteile : Nach mehreren Verschachtelungen führt das Klicken auf das äußerste helle schwebende Feld dazu, dass der gesamte Inhalt von der äußersten Ebene bis zur innersten Ebene ausgewählt wird (FF); wenn sich die Breite des äußersten Moduls ändert, wird das Modul angezeigt bar (IE ).
Es wird empfohlen, das Modul innerhalb eines Moduls zu verwenden und nicht zu verschachteln. - Vorteile : Die Struktursemantik ist völlig korrekt und die Codemenge ist sehr gering.
Nachteile: Wenn der Inhalt zunimmt, ist es einfach, Zeilen automatisch umzubrechen, und der Inhalt wird ausgeblendet.
Es wird empfohlen, die Breite zu verwenden und sie nicht zu verschachteln. - Vorteile : Die Struktursemantik ist völlig korrekt und die Codemenge ist sehr gering.
Die Eigenschaften des Defizit- Box-Modells haben sich geändert. Es ist denkbar, dass es mehr seltsame Ereignisse gibt, als Sie zählen können.
Wenn Sie den Fehler nicht beheben und töten möchten, wird empfohlen , ihn nicht zu verwenden. Er kann jedoch als vorübergehende Täuschung in der Alpha-Version zum Testen verwendet werden. - Vorteile: Die Codemenge ist sehr gering und die Wiederverwendbarkeit extrem hoch.
Der Nachteil besteht darin, dass es sich nicht perfekt an die Semantik anpassen kann und nicht für Überarbeitungen und Bedarfsänderungen geeignet ist.
Empfohlen für Anfänger, ermöglicht es Ihnen, Schwimmprobleme schnell zu lösen. - Vorteile: Der Semantikgrad ist besser als im fünften Fall; die Codemenge ist sehr gering und die Wiederverwendbarkeit ist extrem hoch.
Nachteile: Die Semantik ist noch nicht perfekt, was Überarbeitungen und Nachfrageänderungen nicht förderlich ist.
Empfohlen für Anfänger, ermöglicht es Ihnen, Schwimmprobleme schnell zu lösen. - Vorteile: Der Semantikgrad ist besser als in den Fällen 5 und 6; die Codemenge ist minimal und die Wiederverwendbarkeit ist extrem hoch.
Nachteile: Die Semantik ist noch nicht perfekt, was Überarbeitungen und Nachfrageänderungen nicht förderlich ist.
Es wird empfohlen, Anfängern bei der Verbesserung ihres Denkens die Verwendung anzuleiten, damit sie verstehen, dass es besser ist, zur WEB1.0-Ära der Webseiten zurückzukehren und direkt HTML-Attribute zur Steuerung der Leistung zu verwenden, anstatt Klassennamen zur Steuerung einer Leistung zu verwenden Letzteres hat schließlich weniger Code.
Endlich ist die Liste vollständig. Ich denke jedoch, dass es notwendig ist, mich bei allen für den Artikel zu entschuldigen, den ich auf Ghost abgedruckt habe. Ich bedauere sehr, dass ich den Titel von Ghost von „einfachster“ in „optimal“ geändert habe, was später viele Studenten in die Irre geführt hat. Deshalb habe ich einen Artikel neu geschrieben, um ihn mit Ihnen zu teilen.
Originaltext: http://webteam.tencent.com/?p=1122
