Lad os se på webstedets gitterdesign og nedbryde de enkelte komponenter. Lad os undersøge, hvorfor float er så nyttigt, såvel som den populære teknik til at opbygge det første webnet fra tre streams og et sidefod.
For at studere nettets konstruktion af et websted skal du forstå, hvad en "flow" er. Flow er elementerne på webstedet, placeret efter hinanden. For eksempel kan dette være div-elementer, der går efter hinanden som standard. Men strømmen kan omarrangeres, og blokelementernes position kan ændres.
For at kontrollere flowet bruger vi float-ejendommen, som kan placere blokken på venstre eller højre side. Det er nok at skrive i CSS-filen:
"klasse eller bloknavn" {float: højre / venstre; }
Den eneste ulempe ved float er evnen til at "overlappe" en blok oven på en anden.
For at undgå at løbe over bruger vi klart: begge dele - denne egenskab indstiller strømmen rundt om blokken. Vi indstiller bredden og højden som maksimum og minimum, så værdien dannes i henhold til størrelsen på indholdet (tekst, billeder). Margen - indstil værdien til auto, så eksterne margener dannes automatisk afhængigt af placeringen af blokken.
Da float kan placere blokke i to retninger, er det almindeligt at opdele stedet i vandløb - venstre og højre. Hvis programmøren kun har brug for to streams, efterlader han venstre og højre float, men hvis der er mere end to, justerer han margenerne ved hjælp af margin. Hvordan sker dette:
.kolonne1 {flyde: venstre; bredde: 65px; min. højde: 50 px; margin-højre: 9px; // 9px fra centerbox}
2 strøm:
.kolonne2 {flyde: venstre; // til venstre blok, men uden "overlappende", da vi anvendte margenbredde: 80px; min. højde: 50 px; }
3 strøm:
.column3 {float: højre; bredde: 65px; min. højde: 50 px; }
Håndtering af sidefoden (.footer):
.footer {klar: begge; // vikle rundt om begge sider}
Sådan lavede vi et gitter til stedet ved hjælp af float, der består af tre vandløb.
