Vessünk egy pillantást a webhely rácstervére és bontsuk le az egyes összetevőket. Fedezzük fel, miért olyan hasznos az úszó, valamint a népszerű technikát az első webrács felépítésére három adatfolyamból és egy webhely láblécéből.
A webhely rácsszerkezetének tanulmányozásához meg kell értenie, hogy mi az a "flow". Az áramlás a helyszín egymás után elhelyezkedő eleme. Például ezek lehetnek div elemek, amelyek alapértelmezés szerint egymás után mennek. De az áramlás átrendezhető, és a blokkelemek helyzete megváltoztatható.
Az áramlás szabályozásához az float tulajdonságot használjuk, amely a blokkot a bal vagy a jobb oldalra helyezheti. Elég, ha beírja a CSS fájlba:
"osztály vagy blokk neve" {float: jobb / bal; }
Az úszó egyetlen hátránya, hogy az egyik blokkot a másikra "átfedheti".
Az elgázolás elkerülése érdekében a clear: mindkettőt használjuk - ez a tulajdonság a blokk körüli áramlást állítja be. A szélességet és a magasságot maximálisan és minimumként állítjuk be, hogy az érték a tartalom (szöveg, képek) méretének megfelelően alakuljon ki. Margó - állítsa az értéket automatikus értékre, hogy a külső margók automatikusan kialakuljanak a blokk helyétől függően.
Mivel az úszó a blokkokat két irányban helyezheti el, szokás a helyszínt patakokra osztani - balra és jobbra. Ha a programozónak csak két adatfolyamra van szüksége, akkor elhagyja a bal és a jobb úszót, de ha kettőnél több van, akkor a margókat a margó segítségével állítja be. Hogyan történik ez:
.oszlop1 {lebeg: bal; szélesség: 65px; min-magasság: 50px; jobb szél: 9px; // 9 képpont a középső mezőből}
2 adatfolyam:
.oszlop2 {lebeg: bal; // a bal oldali blokkhoz, de "átfedés" nélkül, mivel a margószélességet alkalmaztuk: 80px; min-magasság: 50px; }
3 adatfolyam:
.oszlop3 {lebeg: jobb; szélesség: 65px; min-magasság: 50px; }
A lábléc (.footer) kezelése:
.láb {tiszta: mindkettő; // tekerje át mindkét oldalát}
Így készítettünk rácsot a webhelyhez úszó segítségével, amely három folyamból állt.
