Zwei Möglichkeiten zum Löschen von Floats in HTML
|
1. Methode 1 zum Löschen von Floating Legen Sie die Höhe des vorherigen übergeordneten Elements fest. Hinweis: Schreiben Sie bei der Unternehmensentwicklung die Höhe möglichst nicht.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>D131_ClearFloat</Titel>
<Stil>
.smallbox1{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
Körper: 3px tiefschwarz;
Rand: 5px;
schweben: rechts;
}
.smallbox2{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
Körper: 3px tiefschwarz;
Rand: 5px;
}
.smallbox3{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
Körper: 3px tiefschwarz;
Rand: 5px;
}
.smallbox4{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
Körper: 3px tiefschwarz;
Rand: 5px;
}
.smallbox5{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
Körper: 3px tiefschwarz;
Rand: 5px;
}
.smallbox6{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: rot;
Körper: 3px tiefschwarz;
Rand: 5px;
}
.bigbox1,.bigbox2{
/*Breite:400px;*/
/*Breite:400px;*/
Hintergrundfarbe: grün;
Rand: 3px schwarz durchgezogen;
}
</Stil>
</Kopf>
<Text>
<div Klasse="bigbox1">
<div Klasse="smallbox1"></div>
<div Klasse="smallbox2"></div>
<div Klasse="smallbox3"></div>
</div>
<div Klasse="bigbox2">
<div Klasse="smallbox4"></div>
<div Klasse="smallbox5"></div>
<div Klasse="smallbox6"></div>
</div>
</body>
</html>
2. Der zweite Weg, um schwebende Fügen Sie das Attribut „clear“ zu den folgenden Attributen hinzu Attributwert löschen: Keine: Standardwert, die Sortierung erfolgt nach den Sortierregeln für schwebende Elemente (links schwebend findet links schwebend, rechts schwebend findet rechts schwebend) left: Nicht nach dem vorherigen linken schwebenden Element suchen rechts: Nicht nach dem vorherigen rechten schwebenden Element suchen beide: Nicht nach den vorherigen linken schwebenden und schwebenden Elementen suchen Wenn wir beispielsweise die Breite und Höhe der großen Box nicht festlegen, unterstützt die kleine Box die große Box, aber die beiden großen Boxen befinden sich auf derselben Zeile.
.smallbox1{
Breite: 100px;
Höhe: 100px;
schweben: links;
Hintergrundfarbe: rot;
Rand: 2px, durchgehend schwarz;
}
.smallbox2{
Breite: 100px;
Höhe: 100px;
schweben: links;
Hintergrundfarbe: rot;
Rand: 2px, durchgehend schwarz;
}
.smallbox3{
Breite: 100px;
Höhe: 100px;
schweben: links;
Hintergrundfarbe: blau;
Rand: 2px, durchgehend schwarz;
}
.smallbox4{
Breite: 100px;
Höhe: 100px;
schweben: links;
Hintergrundfarbe: blau;
Rand: 2px, durchgehend schwarz;
}
</Stil>
</Kopf>
<Text>
<div Klasse="bigbox1">
<div Klasse="smallbox1"></div>
<div Klasse="smallbox2"></div>
</div>
<div Klasse="bigbox2">
<div Klasse="smallbox3"></div>
<div Klasse="smallbox4"></div>
</div>
</body>
Wir verwenden das Clear-Attribut für die dritte Box, damit sie in eine neue Zeile gesetzt werden kann (die vierte Box braucht es nicht, da die dritte Box neben der vierten Box stehen soll). Wir müssen nur den Code der dritten Box ändern.
.smallbox3{
klar:links;
Breite: 100px;
Höhe: 100px;
schweben: links;
Hintergrundfarbe: blau;
Rand: 2px, durchgehend schwarz;
}
Hinweis: Das Margin-Attribut ist ungültig. Wir besprechen das nächste Mal, wie man es behebt. 3. Quellcode: D131_ClearFloat.html D132_CLearAttribute.html Adresse: https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html Zusammenfassen Oben sind zwei der Möglichkeiten zum Löschen von HTML-Floats, die ich Ihnen vorgestellt habe. Ich hoffe, sie werden Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Ein kurzer Vortrag über Responsive Design
>>: Beispielcode zur Implementierung einer DIV-Aufhängung mit reinem CSS (feste Position)
Artikel empfehlen
Vue implementiert einen visuellen Drag-Page-Editor
Inhaltsverzeichnis Drag & Drop-Implementierun...
JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren
Canvas ist ein neues Tag in HTML5. Sie können js ...
Analyse der CentOS6-Methode zum Bereitstellen von Kafka-Projekten mithilfe von Docker
In diesem Artikel wird beschrieben, wie Sie Docke...
Die Bedeutung der 5 Leerzeichenarten in HTML
HTML bietet fünf Leerzeichen mit unterschiedliche...
Ein Leistungsfehler bei MySQL-Partitionstabellen
Inhaltsverzeichnis 2. Stapelanalyse mit pt-pmap 3...
jQuery Canvas zeichnet Bildüberprüfungscodebeispiel
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung der Bereitstellung eines privaten Docker-Warehouse-Registrars
Da immer mehr Docker-Images verwendet werden, mus...
Grundlegende Operationen der MySQL-Lernnotizentabelle
Tabelle erstellen Tabelle erstellen Tabellenname ...
Detaillierte Erläuterung der sinnvollsten Methode zum Partitionieren der Festplatte bei der Installation des Ubuntu-Linux-Systems
Unabhängig davon, ob Sie ein Windows- oder Linux-...
Eine kurze Erläuterung zu „Group By“ in MySQL
Inhaltsverzeichnis 1. Einleitung 2. Bereiten Sie ...
503 Dienst nicht verfügbar Fehlerlösungserklärung
1. Beim Öffnen der Webseite wird die Meldung „503...
So verwenden Sie Webpack und Rollup zum Verpacken von Komponentenbibliotheken
Vorwort Ich habe zuvor eine Komponente im Ladesti...
Ein praktischer Bericht über die Wiederherstellung einer MySQL Slave-Bibliothek
Beschreibung der Situation: Heute habe ich mich b...
Ist MySQL eine relationale Datenbank?
MySQL ist ein relationales Datenbankverwaltungssy...
Detaillierte Erklärung der drei Möglichkeiten zum Festlegen von Rahmen in HTML
Drei Möglichkeiten zum Festlegen von Rahmen in HT...