Wie verwende ich Float? CSS: Zusammenfassung der Float-Floating-Nutzung

Für Entwickler muss Float häufig verwendet werden, aber Sie ertragen oft den ganzen Schmerz, den es mit sich bringt. Vielleicht denken Sie, dass es nur wenig Wissen hat, aber Sie können es wirklich kontrollieren ? CSS-Float ist das, was wir Beschriftungsobjekte nennen, die nach links (float:left) und nach rechts (float:right) schweben. Unter Floating kann man verstehen, dass sich ein DIV-Element vom Standardfluss löst und auf dem Standardfluss schwimmt. Es befindet sich nicht auf dem gleichen Niveau wie der Standardfluss. In diesem Kapitel wird die Verwendung von Float erläutert.

Sie können zunächst kostenlose Kurse im Zusammenhang mit der chinesischen PHP-Website lernen

1. Lernen Sie „CSS Online Manual“ CSS Float(Float)Kurs

2. Sehen Sie sich „Dark Horse Programmer CSS Video Tutorial“ an schwebenim Kapitel

schweben verwandte Inhalte schweben

1. Detaillierte Erklärung der Verwendung von Float, die Sie nicht kennen

Die ursprüngliche Designabsicht von Float besteht darin, den Effekt einer Mischung aus Grafiken und Text zu erzielen, damit der Text dies kann umgeben das Bild. Die heutige Verwendung besteht im Wesentlichen darin, ein horizontales Layout zu erreichen. Obwohl dies ein „Missbrauch“ ist, kann damit häufig der gewünschte Effekt erzielt werden. Die meisten Menschen wissen, wie man Float verwendet, aber nicht jeder kennt das Prinzip und die ursprüngliche Designabsicht von Float.

2. Detaillierte grafische Erklärung von CSS float-float/clear

Wenn ein p-Element A schwebend ist und wenn das vorherige Element von A-Element ebenfalls schwebend ist, dann Das A-Element folgt dem vorherigen Element (wenn diese beiden Elemente nicht in einer Zeile platziert werden können, wird das A-Element in die nächste Zeile gequetscht). Wenn das vorherige Element des A-Elements ein Element im Standardstream ist, dann die relative Vertikalität von A Die Position ändert sich nicht, was bedeutet, dass die Oberseite von A immer an der Unterseite des vorherigen Elements ausgerichtet ist.

3. Die richtige Verwendung von Float, 90 % der Leute verwenden es falsch

Float hat auch eine sehr nützliche Funktion, nämlich das Löschen von Leerzeichen. Ich werde kein Bild davon posten, sondern nur eine Beschreibung. Wenn ich beispielsweise ein Bild in ein p einfüge, bleiben standardmäßig einige Pixel Abstand zwischen den Bildern, was auch als Lücke bezeichnet werden kann. Aber oft ist diese Lücke oder dieser Platz nicht das, was wir brauchen. Zu diesem Zeitpunkt müssen wir dem Bild nur einen Float geben, um es vom Dokumentenfluss zu trennen, und die Bilder passen perfekt zusammen.

4. Zwei Methoden zum Anpassen der Float-Höhe mehrerer Divs in CSS

Wenn Sie Div + CSS für ein dreispaltiges oder zweispaltiges Layout verwenden, erstellen Sie zwei Spalten (oder drei Spalten) haben die gleiche Höhe, was mit Table leicht zu erreichen ist, aber die Verwendung von Div + CSS ist schwieriger. Gemäß der allgemeinen Praxis verwenden die meisten von ihnen das Füllen von Hintergrundbildern oder JS-Skripte, um die Höhe gleich zu machen.

5. Detaillierte Erklärung von float in CSS

Der Ursprung von a.float Das ursprüngliche Design von float besteht darin, einen Textumbrucheffekt zu erzeugen auch das Design Was der Autor von uns verlangt.

b.float-Parameter

Es gibt drei Parameterwerte für das Float-Attribut:

Links: Zeigt an, dass das Element links schwebt.

Rechts: Zeigt an, dass das Element nach rechts schwebt.

Keine: Das Objekt schwebt nicht und folgt dem Standarddokumentfluss.

c. Effektanzeige (nehmen Sie float: left als Beispiel, der Fall von float: right ist nur ein Positionsunterschied)

Detaillierte Einführung in die CSS-Grundlagen von float

Floating hat 4 Attribute: left (links schwebend), rechts (rechts schwebend), none (nicht schwebend), inherit (erben).

Der enthaltende Block eines schwebenden Elements ist sein nächster Vorgänger auf Blockebene.

Das schwebende Element wird nach links (oder rechts) versetzt, bis seine Außenkante die Innenkante des enthaltenden Blocks oder die Außenkante eines anderen schwebenden Elements berührt.

Verwandte Fragen und Antworten

1.

So lösen Sie das Problem des Herunterfallens von Float-Elementen

2.

Bei Verwendung des Float-Attributs in HTML wird die Höhe des übergeordneten Elements zu 0. Wie wird das Problem gelöst?

3. Unter welchen Umständen schlägt der Float fehl?

[Verwandte Empfehlungen]

1. Kostenlose Tutorials auf der chinesischen PHP-Website: "CSS 0 Basic Introductory Tutorial"

2. php Chinesisch Kostenloses Online-Video-Tutorial: „php.cn Dugu Jiujian (2) – CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWie verwende ich Float? CSS: Zusammenfassung der Float-Floating-Nutzung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!