CSS flyter forklart ved å ri en rulletrapp

Hvis du noen gang har hoppet på en rulletrapp, kan du raskt forstå flytere.

din er nesten perfekt. Du bestemmer deg for å introdusere noen flottører for å fikse forholdet mellom noen få elementer.

Den neste tingen du vet, de nylig flytende elementene hopper ut av den nøye utvalgte rekkefølgen, og holder seg til siden av din div som en magnet. Uttrykket "utilsiktet oppførsel" kommer til tankene.

Jeg har personlig brukt timer på å prøve å forstå floats. Jeg hadde lest en artikkel og sagt: "Åh, dette er fornuftig!" Så kom jeg tilbake til koden min, prøv den ut og ... mislykkes. Tilbake til tegnebrettet.

Jeg skal gjøre mitt beste for å skåne deg denne skjebnen.

Flytere skaper vekselstrømmer. Dette er den vanskeligste delen å forstå. Når du har introdusert dem, må du skrive koden slik at den utgjør opptil tre strømmer: normal, venstre og høyre. Dette er et helt nytt regelverk, i motsetning til å manipulere bredden på elementer eller deres plassering.

Egentlig er flottører ganske lik dynamikken i å ri på rulletrapp, og jeg skal vise hvordan de kan brukes sammen med den klare egenskapen for å skape krystallklare forhold i divs. På denne måten vil du ikke møte noen overraskelser neste gang du prøver å bruke flottører i koden.

Må respektere passeringsbanen

Standard flyt av elementer er på samme måte som på bildet over. Noen fyr står i midten med hånden på rekkverket. Han hyler hele rulletrappen. Ingen kan passere ham. Ganske dårlig rulletrappetikette, egentlig.

Han står bak en gjeng andre mennesker som gjør det samme, så ingen kan passere dem heller. Det er ingen begrep om baner eller grunnleggende menneskelig anstendighet.

Dette er scenariet når du ikke bruker flytere i det hele tatt.

OK, nå snakker vi! Mennesker som viser et visst nivå av bevissthet. Elsker å se det.

Vi har en bane til venstre, og en annen bane til høyre. Andre mennesker kan lett bevege seg rundt de to menneskene som står stille og gå raskere opp i rulletrappen, hvis de vil. Ingen blokkerer strømmen ved å stå i midten.

Dette er scenariet når du bruker flytere i div. Det er en venstre flyt og en høyre flyt, og elementene som ikke er flytende kan lett fylle det rommet som ikke blir tatt av de flytende elementene.

Flyter: venstre og høyre

Bruke flytere kan introdusere opptil to nye strømmer: venstre og høyre.

Og dette gjør at den normale strømmen av elementer, de uten flyteverdi, kan fylle ut mellomrommene rundt disse elementene.

Floats lar deg opprette disse nye forholdene mellom strømmer.

Hvis du hadde en linje med mennesker som sto midt i heisen, ville du ha begrensede alternativer for nye strukturer. Men når du har en venstre og høyre kolonne, kan du plutselig spesifisere at visse mennesker står til høyre, andre blir liggende igjen, og en annen gruppe kan fylle ut hullene.

Dette lar deg lage mer lesbar og forståelig kode, fordi flyteegenskapen også gir en indikasjon på et elements forhold til omgivende elementer.

Den klare eiendommen

Det er enda en rynke som vi ikke har diskutert ennå: den klare egenskapen. "Clear" lar elementer spesifisere hvor de skal justeres i forhold til de flytende elementene.

På det første bildet av "Floats" -delen sto de to rulletrappryttere høflig på hver side av rulletrappen. Dette gjør at andre kan passere dem og bevege seg fritt som de ønsker.

La oss si at i stedet for å ha et flytende venstreelement og ett flytende høyreelement, hadde vi i stedet 3 flytende venstreelementer og 1 til høyre. De tre flytende venstre elementene ville stablet seg opp på en linje til venstre hvis vi også gir dem egenskapen "klar: venstre". Men hvis de er horisontalt på linje med det flytende høyre elementet, kan det gjøre det veldig vanskelig eller til og med umulig for normal flyt av elementer å passere:

“Clear: left” forteller hver person som flyter til venstre at de skal rette seg inn etter det første elementet som flytes til venstre. Avhengig av størrelsen på de to nederste personene, kan det være utfordrende for alle normale elementer å presse seg gjennom og okkupere plassen øverst til høyre. Så selv god rulletrappepraksis kan fremdeles føre til blokkeringer.

En av de hyppigste bruksområdene av den klare egenskapen er "tydelig: begge deler". Dette lar deg tilbakestille strømmen av elementer, i motsetning til å fortsette å opprettholde en høyre, venstre og normal flyt. Det er liksom den fyren på rulletrappen som tar opp hele plassen fordi han hadde med seg kofferten.

Med "klart: begge deler", spiller det ingen rolle hvor den ene fyren står i retning mot kofferten. Det spiller ingen rolle hvem som står venstre eller høyre over ham. Han blokkerer fortsatt hele rulletrappen. Folk som kommer etter ham vil trenge å starte en ny strøm av elementer, som kan inkludere hvilken som helst av de tre flytene: venstre, høyre eller normal.

Han har sluppet unna det tre-flow-systemet og tilbakestilt reglene. Dårlig for folk som vil løpe opp rulletrappen? Sikker. Men det er bra hvis du vil forhindre at noen går forbi.

Legg merke til hvordan dette er forskjellig fra den herren i begynnelsen som sto midt i rulletrappen, bak en rekke mennesker som gjorde det samme. Det var et system med én strømning. "Klar: begge deler" erkjenner at det kan være opptil tre strømmer, og blokkerer passering av ethvert element som følger.

Hvis du likte dette innlegget, kan du også glede meg over de andre forklaringene mine på utfordrende CSS- og JavaScript-emner, for eksempel posisjonering, Model-View-Controller og tilbakeringinger.

Og hvis du tror at dette kan hjelpe andre mennesker i samme posisjon som deg, så gi det et "hjerte"!

Dette innlegget dukket opprinnelig på CodeAnalogies-bloggen.