Pogledajmo mrežni dizajn web stranice i raščlanimo pojedine komponente. Istražimo zašto je float toliko koristan, kao i popularnu tehniku za izgradnju prve mrežne mreže iz tri struje i podnožja stranice.
Da biste proučavali mrežnu konstrukciju lokacije, morate razumjeti šta je „protok“. Tok su elementi stranice koji se nalaze jedan za drugim. Na primjer, to mogu biti div elementi koji se prema zadanim postavkama idu jedan za drugim. Ali protok se može preurediti i položaj elemenata bloka može se promijeniti.
Za kontrolu protoka koristimo svojstvo float, koje blok može smjestiti na lijevu ili desnu stranu. Dovoljno je upisati u CSS datoteku:
"ime klase ili bloka" {float: desno / lijevo; }
Jedini nedostatak float-a je sposobnost "preklapanja" jednog bloka na drugi.
Da ne bi došlo do pregaženja, koristimo clear: both - ovo svojstvo će postaviti protok oko bloka. Širinu i visinu postavljamo kao maksimalnu i minimalnu, tako da se vrijednost formira prema veličini sadržaja (tekst, slike). Margin - postavite vrijednost na auto tako da se vanjske margine automatski formiraju ovisno o lokaciji bloka.
Budući da plovak može postavljati blokove u dva smjera, uobičajeno je mjesto podijeliti na potoke - lijevi i desni. Ako programeru trebaju samo dva toka, on ostavlja lijevi i desni plutajući, ali ako ih je više od dva, onda podešava margine pomoću margine. Kako se to događa:
.column1 {float: left; širina: 65px; min-visina: 50px; margina-desno: 9 piksela; // 9 piksela iz središnjeg okvira}
2 tok:
.column2 {float: left; // na lijevi blok, ali bez "preklapanja", jer smo primijenili širinu margine: 80px; min-visina: 50px; }
3 tok:
.column3 {float: desno; širina: 65px; min-visina: 50px; }
Bavljenje podnožjem (.footer):
.footer {clear: oboje; // omotavanje oko obje strane}
Tako smo napravili mrežu za lokaciju koristeći float, koja se sastoji od tri struje.
