Oglejmo si mrežno zasnovo spletnega mesta in razčlenimo posamezne komponente. Raziščimo, zakaj je float tako uporaben, pa tudi priljubljeno tehniko za izdelavo prvega spletnega omrežja iz treh tokov in nogo strani.
Če želite preučiti mrežno konstrukcijo mesta, morate razumeti, kaj je "pretok". Tok so elementi spletnega mesta, ki se nahajajo drug za drugim. To so lahko na primer elementi div, ki privzeto gredo drug za drugim. Toda pretok je mogoče preurediti in spremeniti položaj elementov bloka.
Za nadzor pretoka uporabljamo lastnost float, ki lahko blok postavi na levo ali desno stran. Dovolj je, da v datoteko CSS zapišete:
"ime razreda ali bloka" {float: desno / levo; }
Edina pomanjkljivost plovca je zmožnost "prekrivanja" enega bloka na drugega.
Da bi se izognili povoženju, uporabimo clear: both - ta lastnost bo nastavila pretok okoli bloka. Širino in višino nastavimo kot največjo in najmanjšo, tako da se vrednost oblikuje glede na velikost vsebine (besedilo, slike). Rob - nastavite vrednost na samodejno, tako da se zunanji robovi samodejno oblikujejo glede na lokacijo bloka.
Ker lahko plovec postavlja bloke v dve smeri, je običajno mesto razdeliti na potoke - levo in desno. Če programer potrebuje samo dva toka, potem pusti levo in desno plavajoče, če pa je več kot dva, potem prilagodi robove z uporabo roba. Kako se to zgodi:
.column1 {float: left; širina: 65px; najmanjša višina: 50 slikovnih pik; rob desno: 9 slikovnih pik; // 9 slikovnih pik iz osrednjega polja}
2 tok:
.column2 {float: left; // na levi blok, vendar brez "prekrivanja", saj smo uporabili širino roba: 80px; najmanjša višina: 50 slikovnih pik; }
3 tok:
.column3 {float: desno; širina: 65px; najmanjša višina: 50 slikovnih pik; }
Ukvarjanje z nogo (.footer):
.footer {jasno: oboje; // zaviti okoli obeh strani}
Tako smo s pomočjo float-a izdelali mrežo za spletno mesto, sestavljeno iz treh tokov.
