Detaillierte Beispiele zur Float-Verwendung in HTML/CSS

1. Grundlegende Anwendungsbeispiele für Float

1. Lassen Sie uns zunächst zwei Div-Boxen erstellen und die Höhe, Breite und Hintergrundfarbe festlegen.

Die Anfangspositionen der beiden Felder auf der Webseite sind wie folgt:

Dann schweben wir die rote Box nach rechts

Dann werden wir feststellen, dass die rote Box nach rechts schwebt, die blaue Box sich jedoch direkt nach oben zur ursprünglichen Position der roten Box bewegt.

Dann lassen wir das blaue Kästchen nach rechts schweben, um den Effekt zu sehen:

Wir werden feststellen, dass es dicht neben der roten Box angeordnet ist, nicht von den Elementen auf Blockebene beeinflusst wird und eine einzelne Zeile einnimmt.

2. Grundregeln der schwebenden Positionierung

1. Wenn das Float-Attribut eines Elements links oder rechts ist, schwebt das Element.

2. Wenn nicht genügend Platz übrig ist, um die schwebende Box zu halten, bewegt sich die Box nach unten, bis genügend Platz übrig ist, um die Box zu halten, und bewegt sich dann nach links oder rechts.

3. Die Oberkante der schwebenden Box darf nicht höher sein als die Oberkante der vorherigen Box.

4. Vermeiden Sie beim Platzieren von Floating-Boxen normale Flow-Boxen. Ignorieren Sie Floating-Boxen beim Platzieren von normalen Flow-Boxen.

5. Bei der Berechnung der automatischen Höhe der regulären Flow-Box wird die Floating-Box ignoriert

6. Float löschen: Löschen: beides (links oder rechts).

Zusammenfassen

Oben ist ein ausführliches Beispiel für die Verwendung von Float in HTML/CSS, das vom Herausgeber vorgestellt wurde. Ich hoffe, es ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!