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.

Floats umschließen mit einem neuen Block Formatting Context

Floats umschließen mit einem neuen Block Formatting Context

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

Gratismonat starten Für Ihr Team erwerben

Floats umschließen mit einem neuen Block Formatting Context

“

Eine Besonderheit von Floats ist es, das gefloatete Elemente von ihrem Elternelement nicht umschlossen werden, sondern nach unten herausragen. Und das ist manchmal nicht erwünscht. Ich möchte Ihnen das hier zeigen auf der "Über uns"-Seite aus dem Anfangsordner zu diesem Film. Und hier gibt es nur sehr wenig Text daneben und wenn ich jetzt dieses figure-Element nach rechts oder auch nach links floate, float-rechts, die Klasse ist ja in basis.css hinterlegt, dann sehen Sie, dass hier etwas passiert, was nicht so schön aussieht, in den meisten Fällen jedenfalls, und Sie sehen, dass das figure-Element, das gefloatet ist, aus dem umgebenden section-Element herausragt nach unten. Sofern links daneben genügend Text vorhanden ist, fällt das gar nicht weiter auf und das ist ja auch eigentlich im Sinne des Erfinders, aber es sollte schon in seinem section-Element bleiben hier. Zur Reparatur könnte man jetzt hier natürlich in diesem Fall das footer-Element mit einem "clear: both;" versehen und…

Inhalt