Wie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSS-CSS-Tutorial-php.cn

Wie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSS

不言

Freigeben： 2018-08-10 11:38:43

Original

3315 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie Floats in CSS löschen. Eine Zusammenfassung der fünf Methoden zum Löschen von Floats in CSS hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Methode 1 (leeres Tag mit klarem Attribut verwenden)

Das Tag kann ein div br　hr sein

Verwenden Sie ein leeres Element wie

nach dem Floating-Element und weisen Sie das .clear{clear:both;}-Attribut in CSS zu, um das Floating-Element zu löschen. Sie können auch
oder

verwenden.

Vorteile: einfach, weniger Code, gute Browserkompatibilität.

Nachteile: Es muss eine große Anzahl nicht semantischer HTML-Elemente hinzugefügt werden, der Code ist nicht elegant genug und später nicht einfach zu warten.

Fügen Sie

.clear{ height:0px;font-size:0;clear:both;} unter dem schwebenden Element hinzu, aber unter ie6, Block Elemente haben eine Mindesthöhe, das heißt, wenn die Höhe

Lösung: Font-Size:0; oder Overflow:hidden; element ;So löschen Sie Floats

Methode 2 (Hinzufügen des Überlaufattributs zum übergeordneten Element des Floating-Elements) behebt den Nachteil, dass beim Löschen von Floats durch leere Tag-Elemente unbeabsichtigter Code hinzugefügt werden muss.

Um diese Methode zu verwenden, müssen Sie nur die CSS-Eigenschaft in dem Element definieren, das von Floating befreit werden muss: overflow:auto

overflow:auto; Machen Sie die Höhe adaptiv, Zoom: 1; dient der Kompatibilität mit IE6 und kann auch mit Höhe: 1% gelöst werden.

Hinweis: Zoom entspricht nicht den W3C-Standards. overflow:hidden kann ebenfalls implementiert werden.

<ul style="overflow:auto;zoom:1>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>

Nach dem Login kopieren

Methode 3: (Float zum Container des Floating-Elements hinzufügen, d. h. Float zum übergeordneten Element hinzufügen, um den Float zu löschen)

<div style="float: right;background-color: #1a1a1a;">
   <div style="float: right;width: 300px;height: 300px;background-color: #2a85a0;">
 
   </div>
   <div style="width: 500px;height: 200px;background-color: #8a6d3b">
 
   </div>
</div>

Nach dem Login kopieren

Fügen Sie Float zum Container des Floating-Elements hinzu. Dem Container kann auch ein Floating-Attribut hinzugefügt werden, um den internen Float zu löschen.

Nachteile: Dadurch wird es als Ganzes schweben, was sich auf das Layout auswirkt. Dies wird nicht empfohlen.

Methode 4: (Verwendung nach dem Pseudoobjekt, um Floats zu löschen)

nach dem Pseudoelement (beachten Sie, dass dies keine Pseudoklasse ist, aber ein Pseudoelement, das ein Element darstellt (die neuesten Elemente) und IEhack sind perfekt mit allen gängigen Mainstream-Browsern kompatibel. IEhack bezieht sich hier auf das Auslösen von hasLayout.

Fügen Sie am Ende des Elements ein unsichtbares Blockelement (Blockelement) hinzu, um den Float durch das After-Pseudoelement zu bereinigen.

Fügen Sie am Ende des internen Elements des Containers über CSS-Pseudoelemente ein unsichtbares Leerzeichen „“ oder einen Punkt „“ hinzu und weisen Sie das Clear-Attribut zu, um den Float zu löschen. Es ist zu beachten, dass für IE6- und IE7-Browser ein zoom:1; zur Clearfix-Klasse hinzugefügt werden muss, um haslayout auszulösen.

After-Pseudoobjekt wird vom IE-Browser nicht unterstützt und hat daher keine Auswirkungen auf den IE/WIN-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 das tatsächliche.

2 . Das Inhaltsattribut ist erforderlich, sein Wert kann jedoch leer sein. Bei der Diskussion dieser Methode wird der Wert des Inhaltsattributs auf „.“ gesetzt

Machen Sie nichts und schweben Sie es. Fügen Sie dem Element nach dem Element das Attribut „clear“ hinzu. Die

-Methode ähnelt dem Hinzufügen eines leeren Tags, mit der Ausnahme, dass das Element direkt neben dem schwebenden Element

Verwendung: ist

Verwenden Sie die Pseudoelement-Methode :after im Hauptlayout der Webseite und verwenden Sie sie als Hauptmethode zum Bereinigen von Floats.

Verwenden Sie overflow:hidden; in kleinen Modulen wie ul (pay (Achtung: mögliche Probleme mit versteckten Überlaufelementen).

Wenn es sich um ein schwebendes Element handelt, kann der interne Float automatisch ohne spezielle Verarbeitung gelöscht werden.

Verwenden Sie benachbarte Elemente im Text, um den vorherigen Float zu löschen .

Verwenden Sie die relativ perfekte :after-Pseudoelementmethode, um die Floats zu bereinigen und die Dokumentstruktur klarer zu machen

FEHLERkorrektur:

(1), Double-Margin-Fehler Eine weitere Sache, die Sie beim Umgang mit IE6 beachten sollten, ist, dass das Festlegen von Rändern in die gleiche Richtung wie der Float

zu doppelten Rändern führt.

Schnelle Lösung: Setzen Sie display:inline; auf den Float und keine Sorge, es ist immer noch ein Element auf Blockebene.
(2), 3 Pixel Abstand bedeutet, dass der Text neben dem schwebenden Element auf magische Weise um 3 Pixel herausgeschleudert wird, als ob um das schwebende Element ein seltsames Kraftfeld vorhanden wäre.

Schnelle Lösung: Legen Sie die Breite oder Höhe des betroffenen Texts fest.
(3) In IE7 besteht der Fehler am unteren Rand darin, dass, wenn ein schwebendes übergeordnetes Element schwebende untergeordnete Elemente hat, der untere Rand dieser untergeordneten Elemente vom übergeordneten Element ignoriert wird.

Schnelle Lösung: Verwenden Sie stattdessen die untere Polsterung des übergeordneten Elements.

Verwandte Empfehlungen:

Positionierungsprobleme in CSS: absolute Positionierung, relative Positionierung, fest und statisch

So implementieren Sie Floating in CSS Elementumhüllung

Was ist Float? Das Prinzip des CSS-Clearings Float

Das obige ist der detaillierte Inhalt vonWie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!