Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Die Eigenschaft "float" im Überblick

Die Eigenschaft "float" im Überblick

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Die Eigenschaft "float" im Überblick

“

Floaten war viele Jahre die wichtigste Technik zum Erstellen von Layouts auf Webseiten, bis es von flexbox und grid abgelöst wurde, aber das klassische Einsatzgebiet für die Eigenschaft float ist die Positionierung von Bildern und das möchte ich Ihnen jetzt hier einmal zeigen. Also, Bilder im Fließtext hier, das ist die Spezialität von float. Sie sehen hier einen figure-Element mit einem Bild und einer Beschriftung, darunter etwas Fließtext, und ich möchte jetzt dieses Bild vom Text umfließen lassen und dazu ist das figure-Element bereits markiert, und ich gebe hier direkt im Entwicklertool die Eigenschaft float ein, und dann sehen sie schon, die möglichen Werte sind left, none und right. Im Schnellüberblick: left, Sie sehen, das Bild bleibt links scheinbar stehen und der Text fließt drumherum. none ist so, als ob nichts wäre, also, als ob kein float vorhanden ist, und "float: right;", dann schwebt das Bild nach rechts und der Text fließt links drumherum. Ich bleibe hier erstmal eben…

Inhalt