CSS-Eigenschaft float

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>

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>

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.

Browser-Support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Finden Sie das nützlich?

Ähnliche Artikel