CSS float-Eigenschaft

Die float-Eigenschaft definiert, auf welcher Seite des Containers die Elemente platziert werden sollen, wodurch Text oder andere Elemente darum herum fließen können. Die Eigenschaft hat drei Werte: none, left und right.

Diese Eigenschaft steht in direktem Zusammenhang mit der clear-Eigenschaft, die definiert, ob ein Element neben schwebenden Elementen platziert werden soll oder darunter (clear).

INFO

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

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

Syntax

Syntax der CSS float-Eigenschaft

css

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

Beispiel für die float-Eigenschaft:

Beispiel für die CSS float-Eigenschaft mit dem Wert right

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float property example</h2>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS float Property

Im folgenden Beispiel schwebt das Bild nach links.

Beispiel zur Verwendung der float-Eigenschaft zum Schwebenlassen eines Bildes:

Beispiel für die CSS float-Eigenschaft mit dem Wert left

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float property example</h2>
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
none	Bedeutet, dass das Element nicht schwebt und dort angezeigt wird, wo es im Text steht. Dies ist der Standardwert dieser Eigenschaft.	Ausführen »
left	Bedeutet, dass das Element nach links schwebt.	Ausführen »
right	Bedeutet, dass das Element nach rechts schwebt.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem Elternelement.

Praxis

Was ist der Zweck der 'float'-Eigenschaft in CSS?

Es wird verwendet, um die Hintergrundfarbe eines Elements festzulegenEs wird verwendet, um Text um Bilder herum fließen zu lassenEs wird verwendet, um völlig neue Elemente auf der Webseite zu erstellenEs wird verwendet, um Block-Elemente horizontal zu positionieren

CSS float-Eigenschaft ​

Syntax ​

Beispiel für die float-Eigenschaft: ​

Ergebnis ​

Beispiel zur Verwendung der float-Eigenschaft zum Schwebenlassen eines Bildes: ​

Werte ​