


Wie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSS
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 auchoder
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>
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>
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 ElementVerwendung: 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 machenFEHLERkorrektur:
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.
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!

Heiße KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschiedene Browser weisen Unterschiede in der CSS -Analyse auf, was zu inkonsistenten Anzeigeeffekten führt, hauptsächlich die Differenzentscheidung, die Berechnung des Boxmodells, die Flexbox- und Raster -Layout -Unterstützung und das inkonsistente Verhalten bestimmter CSS -Attribute. 1. Die Standardstilverarbeitung ist inkonsistent. Die Lösung besteht darin, CSSReset oder Normalize.css zu verwenden, um den anfänglichen Stil zu vereinen. 2. Die Box -Modellberechnung der alten Version von IE ist unterschiedlich. Es wird empfohlen, eine einheitliche Boxgröße: Border-Box zu verwenden. 3. Flexbox und Grid führen in Kantenfällen oder in alten Versionen unterschiedlich ab. Weitere Tests und verwenden Sie Autoprefixer; 4. Einige CSS -Attributverhalten sind inkonsistent. Caniuse muss konsultiert und herabgestuft werden.

Accent-Color ist ein Attribut, das in CSS verwendet wird, um die Highlight-Farben von Formularelementen wie Kontrollkästchen, Optionsfeldern und Schieberegler anzupassen. 1. Es ändert direkt die Standardfarbe des ausgewählten Status des Formularsteuerers, z. 2. Die unterstützten Elemente umfassen Eingangskästchen von Typ = "Kontrollkästchen", type = "radio" und type = "range"; 3. Die Verwendung von Akzentfarben kann komplexe benutzerdefinierte Stile und zusätzliche DOM-Strukturen vermeiden und die native Zugänglichkeit aufrechterhalten. 4. Es wird im Allgemeinen von modernen Browsern unterstützt, und alte Browser müssen herabgestuft werden. 5. Setzen Sie Accent-Col

Browser-Standardstile gewährleisten die grundlegende Lesbarkeit, indem Sie automatisch Margen, Füllungen, Schriftarten und Formelementstile anwenden, aber inkonsistente Cross-Browser-Layouts verursachen. 1. Der Standardrand und das Füllen ändern den Layoutfluss, wie den Abstand von Titeln, Absätzen und Listen; 2. Die Standard -Schrifteinstellungen wirken sich auf die Lesbarkeit aus, z. B. 16px -Schriftgröße und TimesNewroman -Schriftart; 3. Die Formelemente sind in verschiedenen Browsern sehr unterschiedlich, daher muss das Erscheinungsbild zurückgesetzt werden. 4. Einige Tags wie stark und sie haben Standard -Schwerpunkte und müssen explizit überschrieben werden. Zu den Workarounds gehört die Verwendung von Normalize.css, Zurücksetzen von Stilen oder global klaren Rändern und Füllungen, während Sie Schriftarten und Formestile für Konsistenz anpassen.

Um den Beginn eines Absatzes zur Verbesserung der visuellen Anziehungskraft zu verschönern, besteht eine gängige Praxis darin, Pseudoelemente von CSS zu verwenden oder das Dokument manuell zu stylen. In der Webentwicklung kann P :: Erste Buchstabe verwendet werden, um den ersten Buchstabenstil wie Vergrößerung, Fettdruck und Verfärbung festzulegen, aber es sollte beachtet werden, dass es nur für Elemente auf Blockebene geeignet ist. Wenn Sie die gesamte erste Zeile hervorheben möchten, verwenden Sie P :: First-Line, um Stile hinzuzufügen. In Dokumentsoftware wie Word können Sie das erste Buchstabenformat manuell anpassen oder Stilvorlagen erstellen, und InDesign verfügt über eine integrierte "Erstverkt" -Funktion, die für Veröffentlichungen und Design geeignet ist. Bei der Bewerbung müssen Sie auf Details achten, z. B. das Vermeiden komplexer Stile, die das Lesen beeinflussen und die Kompatibilität und Formatkonsistenz sicherstellen.

Thevertical-AlignPropertyincSalignSinlineTable-zellelementevertisch.1.itadjustselements LikeImagesorformInputswitintextLinesusingValues-ähnlich, Middle, Super und Sub.2.IntableCells, ItcontrolscontentalInmentWithtop, Middle, Orbottomvalues, oftes

CSS-Gegenaufnahme und Gegeninkrement werden zur automatischen Anzahl von HTML-Elementen verwendet. 1. Verwenden Sie das Gegenauflagen, um den Zähler zu initialisieren oder zurückzusetzen. 2. Inkrementieren Sie den Zähler durch Gegeninkrement, wie z. B. H3 {Gegeninkrement: Unterabschnitt;}, um jede H3-Titelnummer zu erhöhen; 3. Verwenden Sie das Inhaltsattribut, um Pseudoelemente zu kombinieren, um den Zähler anzuzeigen, wie z. B. H3 :: vor {Inhalt:

UseAtOMatedTools -LikepurgecsSoruncsStoscanandremoveUnusedCss; 2.IntegratepurgingIntoyourbuildProcessviawebpack, vite, ortailwind ’ScontentConfiguration; 3.AuditcsSuSageWithCromedevtoolSCoveragetabbeFeforenpurgingToAvoidReperingNeedstyles; 4. Safelistdynamic

Um die Textfarbe in CSS zu ändern, müssen Sie das Farbattribut verwenden. 1. Verwenden Sie das Farbattribut, um die Textvorderfarbe des Textes zu setzen und Farbnamen (z. B. rot), Hexadezimalcodes (wie #ff0000), RGB -Werte (wie RGB (255,0,0)), HSL -Werte (wie HSL (0,100%) und RGBA oder HSLA (0,100%) und RGBA oder HSLA mit Transparen (0,100%) und RGBA oder HSLA (0,100%) (255,0,0,0,0,0,0,0,0,0,0). 2. Sie können Farben auf jedes Element anwenden, das Text enthält, wie z. B. H1 auf H6 -Titel, Absatz P, Link A (beachten Sie die Farbeinstellungen verschiedener Zustände von A: Link, A: Besucht, a: hover, a: aktiv), Schaltflächen, Div, Span usw.; 3.. Die meisten
