CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft

Die korrekte Verwendung der CSS-Float-Eigenschaft kann zu einer gewaltigen Aufgabe werden, da so viel abgedeckt werden muss und es viele Probleme mit der Browserkompatibilität gibt. Seine Positionierung umfasst nicht nur den enthaltenden Block, sondern auch Zeilenboxen, Blockboxen und Inline-Boxen. Dieser Artikel enthält anschauliche Beispiele für die Anwendung der Float-Eigenschaft sowie einige Fehler.

Was ist ein „Float“?

Bestimmte Elemente in CSS sind Blockelemente. Wenn Sie beispielsweise zwei Absatz-Tags als P setzen, werden sie auf zwei Zeilen platziert. Jedes Element belegt eine Zeile. Wenn Sie es in einer Zeile anzeigen möchten, können Sie das Inline-Attribut verwenden, um es auf der Seite anzuzeigen.

Eine weitere effektive Möglichkeit, die Umbrucheigenschaften von Seitenelementen zu ändern, ist die Verwendung von Float. Ein typisches Beispiel ist die Verwendung von „Float“, um ein Bild links- oder rechtsbündig auszurichten. Unten sehen Sie einen einfachen HTML-Code mit einem Bild und einem Absatz:

Fügen wir dem Bild etwas CSS-Code hinzu, um sein Erscheinungsbild zu ändern, hehe:

Wenn mehr Text vorhanden ist, wird der Absatz weiterhin um das Bild herumgeführt:

Beispielsweise müssen wir den Einzug von Bild und Text um 20 Pixel einstellen. Wenn Sie Code wie diesen schreiben, ist der folgende Code falsch und wird nicht funktionieren:

Dann fragen Sie sich vielleicht, warum der 20-Pixel-Einzug des oben geschriebenen Absatzes „p“ nicht funktioniert und nicht effektiv ist? Um das herauszufinden, fügen wir einen Skelettcode hinzu:

Es stellt sich heraus, dass sich das Bild ohne die Ränder (sie haben hier keine Auswirkung darauf, dienen nur zu Ihrem Verständnis) innerhalb des Absatzes befindet! Daher hat die Margin-Eigenschaft im ersten Fall keine Auswirkung. Um dieses Problem zu lösen, können Sie float:left für Absatz p verwenden und eine absolute Breite festlegen: Der Effekt nach dem Festlegen ist wie folgt

Seltsame Regel "Float"

Kommen wir nun zu komplexeren Möglichkeiten der Anwendung der „Float“-Regel, der Transformation von Float-Objekten. Dies kann beim Erstellen von Miniaturansichten erforderlich sein. Zum Beispiel:

Was aber, wenn die Bilder unterschiedliche Höhen haben?

Wenn wir den Elementen in der Liste Anzeigeattribute hinzufügen, ist der Effekt besser, wie in der folgenden Abbildung dargestellt

Jetzt richten wir es vertikal aus:

Es ist zu beachten, dass, wenn dies bei höheren Bildern der Fall ist, alle anderen Bilder das vorherige umgeben, zum Beispiel:

Ein weiteres Beispiel ist das Ändern der Reihenfolge von Elementen. Wir haben eine Liste von Elementen.

Mithilfe von „Float“ ist es praktisch, Elemente auf der Seite zu gruppieren, aber wir stehen vor einem großen Problem: Der folgende Inhalt (Text oder Block) wird sich ebenfalls ändern. Beispielsweise haben wir eine Reihe von Bildern:

Der folgende Text beginnt, den gesamten Block zu umfließen:

Um dies zu vermeiden, müssen Sie die Eigenschaft „clear“ verwenden. Wenn wir dies auf das zweite Bild anwenden:

In diesem Fall erben die restlichen Bilder weiterhin „float: left“. Entsprechend verzerrt erscheint der Text:

Wir müssen clear:both für die Absätze verwenden:

Stellen wir uns nun vor, dass wir im vorherigen Beispiel den Hintergrund für die Galerie festlegen müssen. Wenn das Element nicht schwimmt, erhalten wir Folgendes:

Wenn wir zuerst die Höhe auf UL einstellen:

Neun Regeln für Float-Items:

Ein schwebendes Element kann nicht über die Kanten seines übergeordneten Containers hinausragen. Der linke Rand einer linksschwebenden Box darf nicht links von der linken Kante des sie umgebenden Blocks erscheinen. : : : : : : : : : : : : : : :

Es ist ersichtlich, dass die Regeln des Schwebens sehr verwirrend sind, aber anhand dieser Regeln lässt sich leicht erkennen, dass der Zweck des Schwebens darin besteht, es so nah wie möglich an der Oberseite oder links/rechts zu platzieren, ohne den umschließenden Block zu überfüllen, jedoch nicht höher als die Oberseite der davor generierten Blockbox, Schwebebox und Linienbox.