float

Ü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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`float`	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 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 10.1	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung 1.0
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	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