CSS float Eigenschaft
Kursempfehlung:
Definition und Verwendung
Wenn ein float-Element ein nicht ersetztes Element ist, muss eine klare Breite angegeben werden; andernfalls werden sie so schmal wie möglich.
Anmerkung:Wenn nur sehr wenig Platz auf einer Zeile für float-Elemente vorhanden ist, springt dieses Element zur nächsten Zeile, und dieser Prozess setzt sich fort, bis eine Zeile ausreichend Platz hat.
Weitere Informationen:
CSS-Tutorial:CSS-Position
HTML DOM Referenzhandbuch:cssFloat-Eigenschaft
CSS-Syntax
float: none|left|right|initial|inherit;
Attributwert
| Wert | Beschreibung |
|---|---|
| left | Das Element floatet nach links. |
| right | Das Element floatet nach rechts. |
| keine | Standardwert. Das Element floatet nicht und wird an der Stelle angezeigt, an der es im Text vorkommt. |
| inherit | Legt fest, dass der Wert der float-Eigenschaft von dem übergeordneten Element geerbt werden soll. |
Technische Details
| Standardwert: | keine |
|---|---|
| Vererbbarkeit: | nein |
| Version: | CSS1 |
| JavaScript-Syntax: | object.style.cssFloat="left" |
TIY-Beispiel
- Einfache Anwendung der float-Eigenschaft
- Lassen Sie ein Bild nach rechts in einem Absatz浮动.
- Lassen Sie ein Bild mit Rahmen und Grenze nach rechts in einem Absatz浮动
- Lassen Sie ein Bild nach rechts in einem Absatz浮动. Fügen Sie dem Bild einen Rahmen und eine Grenze hinzu.
- Ein Bild mit einem Titel浮动 nach rechts
- Lassen Sie ein Bild mit einem Titel nach rechts浮动
- Lassen Sie den ersten Buchstaben eines Absatzes nach links浮动
- Lassen Sie den ersten Buchstaben eines Absatzes nach links浮动 und fügen Sie diesem Buchstaben ein Stil hinzu.
- Erstellen Sie ein horizontales Menü
- Verwenden Sie Floating mit einer Spalte von Hyperlinks, um ein horizontales Menü zu erstellen.
- Erstellen Sie eine Startseite ohne Tabelle
- Verwenden Sie Floating, um eine Startseite zu erstellen, die Kopf- und Fußzeile, eine linkseitige Inhaltsverzeichnis und den Hauptinhalt enthält.
Browser-Unterstützung
Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
