.webp)
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.
.png)
.svg)
