La oss ta en titt på nettstedets rutenettdesign og bryte ned de enkelte komponentene. La oss utforske hvorfor float er så nyttig, så vel som den populære teknikken for å bygge det første nettnettet fra tre bekker og en sidefot.
For å studere nettkonstruksjonen til et område, må du forstå hva en "flyt" er. Flyt er elementene på nettstedet, plassert etter hverandre. For eksempel kan dette være div-elementer som går etter hverandre som standard. Men flyten kan omorganiseres, og blokkelementenes posisjon kan endres.
For å kontrollere flyten bruker vi float-egenskapen, som kan plassere blokken på venstre eller høyre side. Det er nok å skrive i CSS-filen:
"klasse eller blokknavn" {float: høyre / venstre; }
Den eneste ulempen med float er muligheten til å "overlappe" en blokk oppå en annen.
For å unngå å kjøre over bruker vi klart: begge deler - denne egenskapen vil sette strømmen rundt blokken. Vi setter bredden og høyden, som maksimum og minimum, slik at verdien blir dannet i henhold til innholdets størrelse (tekst, bilder). Margin - sett verdien til auto slik at eksterne marginer dannes automatisk avhengig av plasseringen av blokken.
Siden float kan plassere blokker i to retninger, er det vanlig å dele nettstedet i bekker - venstre og høyre. Hvis programmereren bare trenger to strømmer, lar han venstre og høyre flyte, men hvis det er mer enn to, justerer han marginene ved hjelp av margin. Hvordan skjer dette:
.kolonne1 {flyte: venstre; bredde: 65px; min høyde: 50px; margin-høyre: 9px; // 9px fra midtboksen}
2 strøm:
.kolonne2 {flyte: venstre; // til venstre blokk, men uten å "overlappe", siden vi brukte marginal: 80px; min høyde: 50px; }
3 strøm:
.column3 {float: right; bredde: 65px; min høyde: 50px; }
Håndtering av bunnteksten (.footer):
.footer {klart: begge deler; // vikle rundt begge sider}
Slik laget vi et rutenett for nettstedet ved hjelp av float, bestående av tre bekker.
