CSS-Eigenschaft float

❮ Vorige Nächste ❯

Die Eigenschaft float definiert, auf welcher Seite des Containers die Elemente platziert werden sollen, so dass der Text oder andere Elemente ihn umschließen können. Die Eigenschaft float hat drei Werte: none, left und right.

Die Eigenschaft float wird ignoriert, wenn die Elemente absolut positioniert sind (position: absolute).

Anfangswert	none
Gilt für	Alle Elemente
Geerbt	Nein
Animierbar	Nein
Version	CSS1
DOM Syntax	object.style.cssFloat = "right";

Syntax

float: none | left | right | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      float: right;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft float</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
  </body>
</html>

Versuch es selber!

Hier floatet das Bild nach links.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      float: left;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft float</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
none	Dieser Wert definiert, dass das Element nicht floaten muss und angezeigt wird, wo es im Text vorkommt. Das ist der Standardwert dieser Eigenschaft.
left	Dieser Wert definiert, dass das Element nach links floatet.
right	Dieser Wert definiert, dass das Element nach rechts floatet.
initial	Dieser Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Dieser Wert erbt die Eigenschaft von seinem übergeordneten Element.