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
JavaScript ermittelt, ob der Browser IE ist
Als Frontend-Entwickler komme ich an den Tücken d...
So verwenden Sie die Vue-Timeline-Komponente
In diesem Artikelbeispiel wird der spezifische Im...
Einführung, Installation und Verwendung von Hyper-V (detaillierte Abbildungen)
Vorwort: Als Gigant in der IT-Branche ist Microso...
Detaillierte Erläuterung der erzwungenen Freigabe belegter Ports unter Linux und der Methode zum Öffnen von Ports in der Linux-Firewall
Bei der Installation von Nginx, MySQL, Tomcat und...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung des Installationsprozesses von MySql 8.0.11 und der beim Verknüpfen mit Navicat aufgetretenen Probleme
Meine System- und Softwareversionen sind wie folg...
Installations- und Konfigurationsschritte für die grüne Dekomprimierungsversion von MySQL
Schritte: 1. MySQL-Datenbank installieren 1. Lade...
Vue implementiert Klick-Feedback-Anweisungen für den Wasserwelleneffekt
Inhaltsverzeichnis Wasserwelleneffekt Sehen wir u...
So behandeln Sie einen Überlauf numerischer MySQL-Typen
Lassen Sie mich Ihnen nun eine Frage stellen. Was...
JavaScript zum Implementieren der Anzeige von Suchdaten
In diesem Artikel wird der Datenanzeigecode für d...
Tutorial zur Installation der dekomprimierten Version von MySQL 8.0.22 (nur für Anfänger)
Inhaltsverzeichnis 1. Ressourcen-Download 2. Entp...
Warum wird für die Webseitenkodierung UTF-8 statt GBK oder GB2312 verwendet?
Wenn Sie die Wahl haben, sollten Sie UTF-8 verwen...
Implementierungsbeispiel für die Angabe der Container-IP beim Erstellen eines Containers in Docker
Wenn Docker einen Container erstellt, verwendet e...
Detaillierte Anwendungsfälle von Vue3 Teleport
Offizielle Website https://cli.vuejs.org/en/guide...
MySQL-Lösung zur Verschlüsselung ganzer Tabellen, keyring_file, detaillierte Erläuterung
veranschaulichen MySql Community Edition unterstü...