Úsztatott objektumok

Tulajdonságok, amelyekkel az úsztatott objektumok kezelhetők

Egy dobozból úsztatott objektumot készíteni a float tulajdonsággal lehet. Ennek alapértelmezett értéke none, azaz nincs úsztatva a doboz. right érték esetén a doboz jobbra, left érték esetén pedig balra lesz úsztatva. Lássuk erre a következő példát:

A példában szereplő IMG doboza balra van úsztatva. A tartalom, amely ezt követi a P elemben (zöld háttérrel), a kép jobboldalán található, és mint a színezett háttér mutatja, ugyanabban a sorban kezdődik, ahol a kép doboza. A képtől jobbra levő sordobozok rövidebbek az úsztatott objektum miatt, de visszakapják az eredeti szélességüket az úsztatott objektum alatt. A példán az is látható, hogy az úsztatott kép a P elem dobozán belül maradt.

A szomszédos dobozok margójával az úsztatott objektumok margói soha nem egyesülnek.

Egy úsztatott objektum átfedésbe kerülhet más dobozokkal, amelyek a normál megjelenítési módszer szerint kerülnek az oldalra. Amikor egy sorbeli doboz kerül átfedésbe úsztatott objektummal, a sorbeli doboz tartalma, háttere és kerete az úsztatott objektum előtt jelenik meg. Amikor blokk-doboz kerül átfedésbe az úsztatott objektummal, a háttere és a kerete az úsztatott objektum mögött jelenik meg, és csak akkor látható, ha az úsztatott objektum átlátszó. A tartalma a doboznak ekkor is az úsztatott objektum elé kerül.

Amennyiben az úsztatott objektum átlóg a következő dobozba, akkor is a fenti szabály érvényes:

A szabványból vett illusztráción látható, hogy az úsztatott objektum hogyan viselkedik amennyiben átnyúlik az egyik bekezdésdobozból a másikba. Általában ez egy szerencsés viselkedés, de néha előfordul, hogy nem ezt szeretnénk.

Ha azt szeretnénk, hogy a következő doboz tartalma mindenképpen az úsztatott objektum alá kerüljön, akkor használjuk ennek kikényszerítésére a clear tulajdonságot, és a következő – szintén a szabványból kimásolt – ábrán látható eredményt kaphatjuk:

A fenti ábrához mindössze a következő szabályra volt szükség:

Mint a fenti ábrán látható, bár mindkét bekezedésnél be van állítva a clear: left tulajdonság, mégis csak a másodiknál látszik ennek hatása. Ennek az az oka, hogy az úsztatott objektum az első bekezdésen belül található, így arra már nem lehet hatással a clear tulajdonsága. A második bekezdés viszont már lecsúszik az úsztatott objektum alá. Az ábrán az is látszik, hogy ezt a böngészőnek úgy kell megoldania, hogy a második bekezdés dobozához tartozó margót növeli meg a szükséges mértékig. Ezt azért is célszerű tudnunk, mert ez egyben azt is jelenti, hogy a margó növelésével nem tudjuk az úsztatott objektumtól eltávolítani a következő dobozt. Ennek a problémának a kivédésére több módszer is lehetséges:

1. Az úsztatott objektum alsó margóját növeljük a szükséges méretűre.
2. A margó helyett a belső margó is használható, feltéve, hogy nem akarjuk a dobozt bekeretezni.
3. Amennyiben a fenti két megoldás egyike sem használható, akkor harmadik megoldásként még mindig lehetőségünk van arra, hogy egy DIV elembe rakjuk bele a kép alá szánt dobozt, a DIV elemnek a clear tulajdonságát állítsuk be megfelelően, így az ehhez tartozó doboz felső margója fog megnyúlni. Az ebbe tett doboz felső margója pedig már a DIV elem tetejétől fogja tovább lefele tolni a dobozt.