Teil 6 – Floats

Floatende Elemente in einem Container

Es folgen nun Beispiele mit gefloateten Boxen innerhalb eines Containers. Die gefloateten Elemente sind kleine grün-gelbe Boxen. Die Container sind graue Boxen mit dunkelgrauen Konturen.

Gefloatete Elemente sind aus dem Normalfluss herausgenommen, also können ihre Container nicht deren Höhe bestimmen. Die grauen Container dehnen sich soweit aus, wie der Inhalt es erfordert – aber nur der Inhalt im Normalfluss des Dokuments. Die Container ignorieren die Höhe der gefloateten Elemente.

Beispiel 1

Falls der Inhalt des Containers lang genug ist, „sitzen“ die gefloateten Elemente wie gewünscht im Container.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie.

Beispiel 2

Wenn der Inhalt des Containers sehr kurz ist, ragen die gefloateten Elemente aus dem Container heraus.

Text here

Beispiel 3

Falls ein Container überhaupt keinen Inhalt hat, hat dieser folglich keine Höhe und zeigt auch keinen grauen Hintergrund an. Falls sich in dem Container noch ein gefloatetes Element befindet, wird dieses angezeigt. Wie man sehen kann, fließt der eigentliche Container nicht um das gefloatete Element herum.

Lösungsmöglichkeit 1 - ein Extra-div zum Aufheben des Floats

Man kann erzwingen, dass ein Container gefloatete Elemente komplett umschließt. Der folgende Container hat einen sehr kurzen Inhalt, aber es existiert auch ein „aufhebendes“ Element, um den Container zu zwingen, das gefloatete Element komplett zu umfließen. In diesem Fall wurde ein <div>-Element benutzt, das mit der clear: both-Eigenschaft versehen wurde.

Text here

Lösungsmöglichkeit 2 - auch den Container floaten

Man kann auch den Container floaten, ebenso wie das enthaltene Element. Der Container wird dann das gefloatete Element komplett umschließen.

Text here

Lösungsmöglichkeit 3 - overflow: auto

Man kann dem Container die Eigenschaft overflow: auto mitgeben. Dies ermöglicht ebenfalls, dass der Container sich der Größe des gefloateten Elements innerhalb anpasst.

Text here

Externe Resourcen