Ü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

Live Beispiel

<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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 6Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
Flow-relative values inline-start and inline-end
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 55IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 55Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung 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.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, fscholz, Michael2402
Zuletzt aktualisiert von: SJW,