Mithilfe der CSS-Eigenschaft „float“ kann ein Element an die linke oder rechte Innenkante seines Elternelements verschoben werden. Die Besonderheit dabei: Mit der Eigenschaft „clear“ kann festgelegt werden, ob nachfolgende Inhalte um das Element herumfließen oder einen eigenständigen Abschnitt bilden.
Die CSS-Eigenschaft „float“ gibt an, wie ein Element schweben soll und die Eigenschaft „clear“ gibt an, welche Elemente neben dem „cleared“ Element schweben können und auf welcher Seite.
Float Left
Float Right
Die „float“-Eigenschaft
Die float-Eigenschaft wird zum Positionieren und Formatieren von Inhalten verwendet, z.B. Lassen Sie ein Bild links neben dem Text in einem Container schweben.
Die float-Eigenschaft kann einen der folgenden Werte haben:
-
- left - Das Element schwebt links von seinem Container
- right - Das Element schwebt rechts von seinem Container
- none - Das Element schwebt nicht (wird genau dort angezeigt, wo es im Text vorkommt)
- inherit - Das Element erbt den Float-Wert seines übergeordneten Elements
Beispiele
img { float: left; }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
img { float: right; }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
Haben Sie noch Fragen zu diesem Thema? Oder brauchen Sie Hilfe bei der Gestaltung Ihrer Webseite von einer professionellen Internetagentur aus München? Dann kontaktieren Sie uns gerne!
