Eine kurze Analyse der Verwendung von HTML Suspended Float

Autor：Eve Cole Aktualisierungszeit：2025-04-25 21:16:01

Einige Verwendungen des Schwimmers

Linke Suspension: float:left;

Rechte Suspension: float:right;

Nutzung des Schwimmers

Die Verwendung von Float ist ziemlich breit. Hier stelle ich kurz die gemeinsamen Verwendungen in der Sammlung vor:

Bevor ich in Float komme, werde ich einige Inline-Block-Eigenschaften festlegen. Die Blockattribute werden mit dem Div -Inlay kombiniert, um das Seitenlayout zu vervollständigen. Dann komme ich in das schwimmende Attribut ein, das die Elemente viel einfacher macht. Es gibt keine Unterscheidung zwischen Elementen auf Blockebene, Inline-Elementen oder Inline-Blocks im schwimmenden. Der Float tippt auch automatisch als Größe der übergeordneten Elementbreite ändert sich, z. Stellen Sie das Betrachtungsfenster direkt ein und drücken Sie die Elemente in die nächste Zeile ein.
In Bezug auf die SEO -Optimierung, die ich gerade gelernt habe, ist die Browseranalyse von oben nach unten. Daher werden wichtige Inhalte häufig vorne geschrieben und einige unwichtige und Anzeigen in der Rückseite geschrieben. Ich möchte jedoch, dass Benutzer auf die Anzeigen achten. Daher ist der Hauptinhalt in der Mitte angeordnet und die Anzeigen sind links und rechts ausgesetzt. Ich glaube, dass Freunde, die oft auf den Webseiten stöbern, diesen Punkt ebenfalls bemerkt haben. Lassen Sie uns über einige der Schreiben und Auswirkungen der Federung sprechen. Lassen Sie uns über einige der Schreiben und Auswirkungen der Federung sprechen.

Wenn das untergeordnete Element suspendiert ist, wird das übergeordnete Element in einer Höhe zusammenfällt. Dieser Teil beinhaltet das Löschen der Suspendierung. Im nächsten Kapitel wird die Erklärung der Aufhängung erwähnt.

Also wieder auf den Punkt,

Das erste Phänomen float = Inline-Block

Die Aufhängung wird der Stil von 4 Blöcken sein, der den Inline -Blockmodus wird: Wie in der folgenden Abbildung gezeigt

 <Style> div {width: 200px; Höhe: 200px; Hintergrundfarbe: Pink; Grenze: 1PX Solid Black; float: links; } </style>

 <body> <div> </div> <div> </div> </div> <div> </div> </div> <div> </div>

Das zweite Phänomen:

Wie in der folgenden Abbildung gezeigt, wird das zweite Blockelement unter dem ersten, da der erste ausgesetzt ist, unter dem ersten dargestellt.

Das letztere Element wird jedoch nicht zum vorherigen Element übergehen, z. B. das vierte Blockelement, aber das dritte wird nicht suspendiert. Das Blockelement der vierten Staffel bleibt in seiner ursprünglichen Position.

 <Styles> .First-One {float: links; Hintergrundfarbe: Grün; } .Second-One {Hintergrundfarbe: lila; } .Third-one {Hintergrundfarbe: Blau; }. Hintergrundfarbe: Grau; } div {width: 200px; Höhe: 200px; Hintergrundfarbe: Pink; Grenze: 1PX Solid Black; Schriftgröße: 30px; } </style>

 <body> <div class = erster-one> </div> <div class = second-on> </div> <div class = dritter> </div> <div class = viertes one

Das dritte Phänomen:

Wenn alle Elemente schweben und die verbleibende Breite des übergeordneten Elements nicht ausreicht, um die Anordnung der untergeordneten Elemente in dieser Zeile zu unterstützen, wird es mit der oberen Ebene verbunden

Dieser Artikel ist reproduziert von: https://segmentfault.com/a/1190000022669455

Zusammenfassen

Dies ist das Ende dieses Artikels über eine kurze Analyse der Verwendung des HTML -schwimmenden Floats. Weitere verwandte HTML -Float -Float -Inhalte finden Sie nach früheren Artikeln von Wulin.com oder stöbern Sie weiter unten in den folgenden Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!