Possible placeholder

CSS Layout

Placeholder placeholder placeholder placeholder
placeholder placeholder

whatsappInstagramtwitter

Verstehe Placeholder noch einfacher & kostenlos in der App

Geprüfte Lerninhalte

Über 5000 Videos, Übungsaufgaben und Prüfungen

Schneller zur Wunschnote

youtube badgevon apple empfohlen

Die Verwendung von CSS ermöglicht es, die Position von HTML-Elemente zu steuern. In CSS kann unteranderem mit Float das Layout bearbeitet werden. Mit clear wird es wieder aufgehoben.


Erklärung

Mittlerweile gibt es verschiedene Möglichkeiten die Position von HTML-Elementen anzupassen. Eine dieser Möglichkeiten ist float. Mit dem CSS-Attribut float kannst du einem HTML-Element den Befehl geben sich an den linken oder rechten Rand seines Elternelements zu schieben.

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Standardwert (Elemente umfließen nicht)

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Element positioniert sich an der linken Seite seines Elternelements

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Element positioniert sich an der rechten Seite seines Elternelements

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Element erbt Wert des float-Attributs des Elternelements

Das CSS-Attribut clear beendet floats. Ein Element mit dem CSS-Attribut clear positioniert sich nicht neben vorherige Elemente und versteckt sich auch nicht dahinter. Es positioniert sich eine Zeile darunter.

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Standardwert (Element ist es erlaubt auf beiden Seiten zu umfließen)

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Element darf weder rechts noch links umfließen

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Element darf links nicht umfließen

Hier versteckt sich noch mehr!
Besuche die App, um alle Inhalte zu sehen!

Element darf rechts nicht umfließen

Wie bereits erwähnt gibt es mehrere Möglichkeiten HTML-Elemente zu positionieren. Schau dir gerne auch mal flexbox oder grid an.


Beispiel

Schau dir mal das verlinkte Beispiel an. Hier kannst du mit den Buttons das float-Attribut setzen und die verschiedenen Ergebnisse sehen.

Beispiel

No items found.

Verstehe jedes Thema in wenigen Minuten in der simpleclub App

Mit der simpleclub App hast du immer und überall Zugriff auf:

Leicht verständliche Lernvideos

Prüfungsnahe Übungsaufgaben

Karteikarten

Individuelle Lernpläne & Abiturprüfungen

... und deinen persönlichen KI-Tutor für Fragen