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.
Falls der Inhalt des Containers lang genug ist, „sitzen“ die gefloateten Elemente wie gewünscht im Container.
Wenn der Inhalt des Containers sehr kurz ist, ragen die gefloateten Elemente aus dem Container heraus.
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.
div
zum Aufheben des FloatsMan 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.
Man kann auch den Container floaten, ebenso wie das enthaltene Element. Der Container wird dann das gefloatete Element komplett umschließen.
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.