Übersicht
Die float Eigenschaft bestimmt, ob ein Element aus dem normalen Fluss herausgelöst werden soll und nachfolgende Inhalte auf der linken oder rechten Seite des gefloateten Elements platziert werden sollen.
- Standardwert:
none - Anwendbar auf: alle Elemente
- Vererbbar: Nein
- Prozentwerte: Nein
- Medium: visuell
- berechneter Wert: wie festgelegt
Syntax
float: left | right | none | inherit
Werte
- none
- Standardwert. Das Element wird nicht umflossen.
- left
- Das Element wird nach links gerückt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.
- right
- Das Element wird nach rechts gerückt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.
- inherit
- Der Wert des Elternelements wird geerbt.
Beispiele
<style type="text/css">
div { border: solid red; max-width: 70ex; }
h4 { float: left; margin: 0; }
</style>
<div>
<h4>HELLO!</h4>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
HELLO!
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| CSS Logical Properties and Values Level 1 Die Definition von 'float and clear' in dieser Spezifikation. |
Bearbeiterentwurf | Adds the values inline-start and inline-end. |
| CSS Basic Box Model Die Definition von 'float' in dieser Spezifikation. |
Arbeitsentwurf | Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report. |
| CSS Level 2 (Revision 1) Die Definition von 'float' in dieser Spezifikation. |
Empfehlung | No change |
| CSS Level 1 Die Definition von 'float' in dieser Spezifikation. |
Empfehlung | Initial definition |
Browser Kompatibilität
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android Webview | Chrome für Android | Edge Mobile | Firefox für Android | Opera für Android | iOS Safari | Samsung Internet | |
| Grundlegende Unterstützung | Chrome Vollständige Unterstützung 1 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 1 | IE Vollständige Unterstützung 4 | Opera Vollständige Unterstützung 7 | Safari Vollständige Unterstützung 1 | WebView Android Vollständige Unterstützung 1 | Chrome Android Vollständige Unterstützung Ja | Edge Mobile Vollständige Unterstützung Ja | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 6 | Safari iOS Vollständige Unterstützung 1 | Samsung Internet Android Vollständige Unterstützung Ja |
Flow-relative values inline-start and inline-end | Chrome Keine Unterstützung Nein | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 55 | IE Keine Unterstützung Nein | Opera Keine Unterstützung Nein | Safari Keine Unterstützung Nein | WebView Android Keine Unterstützung Nein | Chrome Android Keine Unterstützung Nein | Edge Mobile Keine Unterstützung Nein | Firefox Android Vollständige Unterstützung 55 | Opera Android Keine Unterstützung Nein | Safari iOS Keine Unterstützung Nein | Samsung Internet Android Keine Unterstützung Nein |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung
- Experimentell. Das Verhalten kann sich zukünftig ändern.
- Experimentell. Das Verhalten kann sich zukünftig ändern.