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
Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf
Während der Installation von Ubuntu 18 trat das P...
Verwendung von TypeScript-Generics
Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...
JavaScript-Makrotasks und Mikrotasks
Makrotasks und Mikrotasks JavaScript ist eine Sin...
Schritte zum Erstellen eines Dateiservers mit Apache unter Linux
1. Über den Dateiserver Wenn Sie in einem Projekt...
Detaillierte Erläuterung der Gründe und Lösungen für schwebende Elemente, die die Höhe ihrer übergeordneten Elemente reduzieren
Schwebende Elemente führen dazu, dass ihre überge...
MySQL-Operationen: Operationen mit JSON-Datentyp
Im vorherigen Artikel haben wir das ausführliche ...
Docker+Nextcloud zum Erstellen eines persönlichen Cloud-Speichersystems
1. Docker-Installation und -Start yum installiere...
Verständnis und Anwendungsszenarien von ES6-Erweiterungsoperatoren
Inhaltsverzeichnis 1. Ersetzen Sie die Apply-Meth...
Beispielcode zur Implementierung des Regentropfen-Animationseffekts mit CSS
Glasfenster Was wir heute erreichen werden, ist d...
Vue implementiert Multi-Grid-Eingabefeld auf mobilem Endgerät
Vor Kurzem hat das Unternehmen die Anforderung ge...
VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren
Willkommen zur vorherigen Canvas-Spielserie: 《VUE...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.20 (Win10)
In diesem Artikel wird die Installations- und Kon...
Zusammenfassung der Wissenspunkte zur MySQL-Master-Slave-Replikation
Eine Optimierungslösung, wenn ein einzelner MySQL...
Ist es notwendig, dem Img-Bild-Tag ein Alt-Attribut zuzuweisen?
Fügen Sie dem img-Bild-Tag ein Alt-Attribut hinzu?...
Detailliertes Tutorial zur Installation von MySQL unter Linux
MySQL-Downloads für alle Plattformen sind unter M...