Figyeljünk az úszó hátrányaira. Hogyan viselkednek egymással a blokk és az inline elemek, és hogy együtt használják-e őket? Elemezzük, mi a veszteség, és hogyan kell kezelni.
Annak ellenére, hogy a legutóbbi cikkben egyszerű rácsot építettünk a webhelyhez úszók segítségével, eredetileg a szövegben az elemek áramlásának beállítására szolgálnak. Az úszónak három jelentése van: bal - az elemek a bal margóra tapadnak; jobb - az elemeket a jobb szélre nyomják; nincs - a Wrap mód le van tiltva.
Az úszóba burkolt elem méretezhető és párnázható, de ha az elem be van helyezve, akkor blokkelemként viselkedik.
.block1 {
balra lebeg;
szélesség: 150px;
}
.block2 {
úszó: jobbra;
szélesség: 150px;
}
Van még egy probléma az úszók használatakor, amelyek kiesnek a patakból. Akkor jelenik meg, amikor a blokkok egymás után mennek, de csak az egyikük rendelkezik az úszó tulajdonsággal, akkor a többi tetején lesz, mert nem lát más blokkokat. A beillesztett elemek körbefutják az úszó elemeket, de az ezt a szöveget tartalmazó blokk az úszó elem alatt marad.
De hogyan működik az úszó az úszóval?
Szövegként viselkednek: egymás után állnak, amíg van szabad hely, majd új sorra lépnek. Ezért úszók segítségével rácsokat kezdtünk építeni. Ha nincs szabad hely, akkor a helyszín szélességén túlra kerülnek, vagyis sehova sem mennek.
Ha az úszó nem lát egyszerű blokkelemeket, akkor a blokkelemeket meg lehet tanítani az úszó látására. A clear tulajdonságot használjuk, amely letiltja a csomagolást minden oldalról (vagy a kijelölt oldalakról). Vagyis egy tiszta elem az úszó elem alá fog esni.
