Zusammenfassung der Definition und Verwendung von Floating-Attributfunktionen

Um das Float-Attribut von CSS einzuführen, müssen Sie zunächst den Standarddokumentfluss verstehen: Ohne den Eingriff von CSS belegen Elemente auf Blockebene eine Zeile nebeneinander, und die Breite und Höhe werden automatisch ausgefüllt. Der Standarddokumentfluss (Standardlayout) einer HTML-Seite ist: von oben nach unten, von links nach rechts, mit Zeilenumbrüchen beim Auftreffen auf Blöcke (Elemente auf Blockebene). Die anfängliche Verwendung des Float-Attributs bestand darin, den Zielinhalt mit Text zu umhüllen, was häufig in Zeitungen vorkommt. Später wurde es hauptsächlich verwendet, um den Inhalt horizontal nebeneinander anzuordnen: Nachdem dem Float-Attribut ein Wert zugewiesen wurde Das Element besteht darin, sich vom Dokumentfluss zu lösen, nach links und rechts zu schweben und am linken und rechten Rand des übergeordneten Elements zu bleiben (Standard ist der Textkörperbereich). Einführung in Float-Attribute: left: Das Element schwebt nach links. rechts: Das Element schwebt nach rechts.

1. Eine kurze Einführung in Floating-Eigenschaften in CSS

Einführung : Ohne den Eingriff von CSS belegen die Elemente auf Blockebene eine Zeile, und die Breite und Höhe können nebeneinander angezeigt werden, und die Breite und Höhe werden automatisch ausgefüllt. Der Standarddokumentfluss (Standardlayout) einer HTML-Seite ist: von oben nach unten, von links nach rechts, mit Zeilenumbrüchen beim Auftreffen auf Blöcke (Elemente auf Blockebene).

2. CSS-Float-Floating-Eigenschaft

Einführung: In diesem Artikel wird hauptsächlich das Float-Attribut vorgestellt: Definieren der Richtung, in der das Element schwebt.

3. Nachdem das Float-Attribut auf li gesetzt wurde, kann die äußere UL nicht geöffnet werden.

Ich bin in letzter Zeit mehrmals im Projekt auf dieses Problem gestoßen. Ich habe das Gefühl, dass es durch Floating verursacht wird. Ich habe es zwar verwendet

Es wurde gelöst, aber ich habe es nicht wirklich verstanden, weil ich den relevanten Inhalt im Internet überprüft habe li, es hat sich vom aktuellen normalen Dokumentenfluss gelöst, daher gibt es keine Möglichkeit, die Höhe der äußeren Ul zu erweitern.

4.

Erklärung zur Verwendung des CSS-Float-Attributs und Beispiele

Das CSS-Float-Attribut wird zum Festlegen von Beschriftungsobjekten verwendet (z. B. < ;p>-Tag, -Tag und andere HTML-Tags) Floating ist das, was wir als Floating nach links (float:left) bezeichnen Nach rechts bewegen (float:right).

Was bedeutet Float? Float bedeutet „schweben“, und ins Chinesische übersetzt bedeutet es auch „schweben“. Lesen Sie das Float-Handbuch im entsprechenden CSS-Handbuch, um grundlegende Informationen zu Float zu erhalten.

Die Rolle von Float: Definieren Sie Float (Floating) über CSS, damit der P-Style-Layer-Block nach links oder rechts (lean) schweben kann.

5.

Zusammenfassung der Verwendung von „clear Both“ zum Löschen von Floats in CSS

In unserer täglichen Webseitenentwicklung hat jede Seite viele p-Layouts Als wir entwickelten, wussten wir, dass die Verwendung von CSS-Float zu CSS-Float führen würde. Eine Sache, die wir tun müssen, ist, das Float-Attribut zu löschen. Heute werden wir es Ihnen geben Wir stellen eine Zusammenfassung der Verwendung von „Clear Both“ zum Löschen von Floats vor!

6.

Teilen Sie eine Optimierungslösung zum Löschen von Floats

Der Clearfix-Hack ist als Methode zum Löschen von Floats ohne Verwendung zusätzlicher Tags bekannt eine Optimierungslösung, die die Menge an benötigtem CSS weiter reduzieren kann.

Verwandte Fragen und Antworten:

1.

Javascript – Fragen zur Verwendung von Overflow: Hidden zum Löschen von Floats

2.

Java - Android-Floating-Box-Problem

[Verwandte Empfehlungen]

1.

jQuery implementiert eine intelligente Floating-Positionierung, wenn die Seite gescrollt wird

2.

Einfache Implementierung der js-Floating-Box

3.

Zusammenfassung der Verwendung von „clear Both“ zum Löschen von Floats in CSS

Das obige ist der detaillierte Inhalt vonZusammenfassung der Definition und Verwendung von Floating-Attributfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!