CSS-Layout - Schweben und Klar

CSS-Layout - Schweben und Klar

CSS float Diese Eigenschaft legt fest, wie ein Element gefloatet wird.

CSS clear Diese Eigenschaft legt fest, welche Elemente neben dem Clear-Element floaten können und auf welcher Seite.

float-Eigenschaft

float Diese Eigenschaft wird verwendet, um Inhalte zu positionieren und zu formatieren, z.B. um ein Bild nach links zum Text im Container zu floaten.

float Diese Eigenschaft kann einen der folgenden Werte haben:

  • left - Das Element floatet an der linken Seite seines Containers
  • right - Das Element floatet an der rechten Seite seines Containers
  • none - Das Element wird nicht gefloatet (wird an der Stelle im Text angezeigt). Standardwert.
  • inherit - Das Element übernimmt den float-Wert seines Elternelements

Die einfachste Verwendung ist:float Diese Eigenschaft ermöglicht den Effekt von Textumfluss um Bilder (z.B. in Zeitungen).

Beispiel - float: right;

Im folgenden Beispiel wird angegeben, dass das Bild im Text nach rechts浮动 sein soll:

Ananas

Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website building tutorials you need, from basic HTML to CSS, and even advanced XML, SQL, JS, PHP.

Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML, and other technologies such as JavaScript, PHP, SQL, etc.

At CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: right;
}

Try It Yourself

Beispiel - float: left;

Im folgenden Beispiel wird angegeben, dass das Bild im Text stehen sollNach linksFloat:

Ananas

Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website building tutorials you need, from basic HTML to CSS, and even advanced XML, SQL, JS, PHP.

Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML, and other technologies such as JavaScript, PHP, SQL, etc.

At CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: left;
}

Try It Yourself

Beispiel - Kein float

Im folgenden Beispiel wird das Bild an der Stelle angezeigt, an der es im Text erstmals erscheint (float: none;):

Ananas Leading Web Technology Tutorials - All Free. At CodeW3C.com, you can find all the website building tutorials you need, from basic HTML to CSS, and even advanced XML, SQL, JS, PHP. Our reference manual covers all aspects of website technology. This includes W3C standard technologies such as HTML, CSS, XML, and other technologies such as JavaScript, PHP, SQL, etc. At CodeW3C.com, we provide thousands of examples. By using our online editor, you can edit these examples and experiment with the code.

Example

img {
  float: none;
}

Try It Yourself

Further Reading

Supplementary Books:CSS Floating