CSS Float
Was ist CSS Float (Schweben)?
CSS float verschiebt ein Element nach links oder rechts, und die umliegenden Elemente werden ebenfalls neu angeordnet.
Float wird oft für Bilder verwendet, ist aber auch im Layout sehr nützlich.
Wie Elemente floaten
Dass ein Element horizontal floatet, bedeutet, dass es sich nur nach links oder rechts bewegen kann, nicht nach oben oder unten.
Ein gefloatetes Element versucht, so weit wie möglich nach links oder rechts zu wandern, bis seine Außenkante den Rand der umgebenden Box oder den Rand einer anderen gefloateten Box berührt.
Elemente nach dem floatenden Element werden es umfließen.
Elemente vor dem gefloateten Element werden nicht beeinflusst.
Wenn das Bild nach rechts gefloatet wird, umfließt der folgende Textfluss es auf der linken Seite:
Gefloatete Elemente nebeneinander
Wenn Sie mehrere gefloatete Elemente zusammen platzieren, liegen sie nebeneinander, wenn Platz vorhanden ist.
Hier verwenden wir die float-Eigenschaft für die Bildergalerie:
Floats aufheben - clear verwenden
Nachdem ein Element gefloatet wurde, werden die umgebenden Elemente neu angeordnet. Um dies zu vermeiden, verwenden Sie die clear-Eigenschaft.
Die clear-Eigenschaft legt fest, dass auf keiner Seite eines Elements gefloatete Elemente erscheinen können.
Fügen Sie dem Text mithilfe der clear-Eigenschaft eine Bildergalerie hinzu:
Weitere Beispiele
Lass uns dem Bild einen Rahmen und einen Außenabstand hinzufügen und es rechts neben dem Absatz schweben lassen.
Titel und Bild nach rechts floaten lassen
Lasse die Überschrift und das Bild nach rechts schweben.
Den ersten Buchstaben des Absatzes nach links floaten lassen
Ändere den Stil so, dass der erste Buchstabe des Absatzes nach links schwebt.
Webseite ohne Tabellen erstellen
Verwende float, um einen Webseiten-Header, einen Footer, linken Inhalt und Hauptinhalt zu erstellen.
Alle float-Eigenschaften in CSS
Die Zahlen in der Spalte "CSS" geben die verschiedenen CSS-Versionen (CSS1 oder CSS2) an, die die Eigenschaft definieren.
| Eigenschaft | Beschreibung | Wert | CSS |
|---|---|---|---|
| clear | Gibt an, dass keine schwebenden Elemente um das Element herum erlaubt sind. | left right both none inherit |
1 |
| float | Gibt an, ob eine Box (ein Element) schweben kann. | left right none inherit |
1 |