Heim Web-Frontend CSS-Tutorial Wie lösche ich Floats in CSS? Zusammenfassung von fünf Methoden zum Löschen von Floats in CSS

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

Aug 10, 2018 am 11:38 AM
CSS klar schwebend

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>

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 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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1511
276
Was sind gemeinsame Inkonsistenzen von CSS -Browser? Was sind gemeinsame Inkonsistenzen von CSS -Browser? Jul 26, 2025 am 07:04 AM

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.

Was ist die Akzentfarbe? Was ist die Akzentfarbe? Jul 26, 2025 am 09:25 AM

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

Wie wirkt sich der Browser -Standard -Stylesheet auf das Rendering aus? Wie wirkt sich der Browser -Standard -Stylesheet auf das Rendering aus? Jul 19, 2025 am 02:08 AM

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.

Wie stylen Sie den ersten Brief oder die erste Zeile eines Absatzes? Wie stylen Sie den ersten Brief oder die erste Zeile eines Absatzes? Jul 19, 2025 am 02:58 AM

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.

Beschreiben Sie die Eigenschaft 'vertikaler Align' und ihre typischen Anwendungsfälle Beschreiben Sie die Eigenschaft 'vertikaler Align' und ihre typischen Anwendungsfälle Jul 26, 2025 am 07:35 AM

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

Beschreiben Sie die CSS-Eigenschaften 'Counter-Resiet' und 'Counter-Increment' Beschreiben Sie die CSS-Eigenschaften 'Counter-Resiet' und 'Counter-Increment' Jul 18, 2025 am 04:00 AM

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:

Wie kann man ungenutzte CSS reinigen? Wie kann man ungenutzte CSS reinigen? Jul 27, 2025 am 02:47 AM

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

Wie ändere ich die Textfarbe in CSS? Wie ändere ich die Textfarbe in CSS? Jul 27, 2025 am 04:25 AM

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

See all articles