CSS Floats forklaret ved at køre på en rulletrappe

Hvis du nogensinde har sprunget på en rulletrappe, kan du hurtigt forstå floats.

Din

er næsten perfekt. Du beslutter at introducere nogle flydere for at løse forholdet mellem nogle få elementer.

Den næste ting, du ved, dine nyligt flydende elementer springer ud af din omhyggeligt valgte rækkefølge og klæber til siden af ​​din div som en magnet. Udtrykket "utilsigtet opførsel" kommer til at tænke på.

Jeg har personligt brugt timer på at prøve at forstå floats fuldt ud. Jeg læste en artikel og sagde: ”Åh, det giver mening!” Så vendte jeg tilbage til min kode, prøv den og ... mislykkes. Tilbage til tegnebrættet.

Jeg vil gøre mit bedste for at skåne dig denne skæbne.

Floats skaber vekselstrømme. Dette er den sværeste del at forstå. Når du først har introduceret dem, skal du skrive din kode, så den tegner sig for op til tre strømme: normal, venstre og højre. Dette er et helt nyt sæt regler i modsætning til at manipulere bredden på elementer eller deres placering.

Faktisk er flyder temmelig meget ligner dynamikken ved at køre på rulletrappe, og jeg vil vise, hvordan de kan bruges sammen med den klare egenskab til at skabe krystalklare forhold inden for divs. På denne måde, næste gang du prøver at bruge floats i din kode, vil du ikke støde på nogen overraskelser.

Jeg skal respektere passbanen

Standardstrømmen af ​​elementer er på samme måde som billedet ovenfor. En mand står i midten med hånden på rækværket. Han hylder hele rulletrappen. Ingen kan passere ham. Temmelig dårlig rulletrappeetikette, virkelig.

Han står bag en masse andre mennesker, der gør det samme, så ingen kan passere dem heller. Der er ikke noget begreb om baner eller grundlæggende menneskelig anstændighed.

Dette er scenariet, når du slet ikke bruger floats.

Okay, nu taler vi! Mennesker, der viser et vist niveau af opmærksomhed. Elsker at se det.

Vi har en bane dannet til venstre og en anden bane dannet til højre. Andre mennesker kan nemt bevæge sig rundt i de to mennesker, der står stille og gå hurtigere op i rulletrappen, hvis de vil. Ingen blokerer for strømmen ved at stå i midten.

Dette er scenariet, når du bruger floats i din div. Der er en venstre gennemstrømning og en højre strømning, og elementerne, der ikke er svævet, kan let udfylde det rum, der ikke tages af de flydende elementer.

Floats: Venstre og højre

Brug af flydere kan introducere op til to nye strømme: venstre og højre.

Og dette gør det muligt for den normale strøm af elementer, dem uden en flydeværdi, at udfylde mellemrummet omkring disse elementer.

Floats giver dig mulighed for at oprette disse nye forhold mellem strømme.

Hvis du havde en række mennesker, der stod midt i elevatoren, ville du have begrænsede muligheder for nye strukturer. Men når du har en venstre og højre kolonne, kan du pludselig angive, at visse mennesker står til højre, andre forbliver venstre, og en anden gruppe kan udfylde hullerne.

Dette giver dig mulighed for at oprette en mere læselig og forståelig kode, fordi float-egenskaben også giver en indikation af et elements forhold til omgivende elementer.

Den klare ejendom

Der er endnu en rynke, som vi ikke har drøftet endnu: den klare egenskab. "Ryd" giver elementer mulighed for at specificere, hvor de skal justeres i sammenligning med de flydende elementer.

På det første billede af afsnittet “Floats” stod de to rulletrapper ryttere høfligt på hver side af rulletrappen. Dette giver andre mulighed for at passere dem og bevæge sig frit, som de ønsker.

Lad os sige, at i stedet for at have et flydende venstreelement og et flydende højreelement, havde vi i stedet 3 flydede venstreelementer og 1 til højre. De tre flydede venstre elementer ville stables op i en linje til venstre, hvis vi også giver dem egenskaben "klar: venstre". Men hvis de er vandret på linje med det flydede højre element, kan det gøre det meget vanskeligt eller endda umuligt for den normale strøm af elementer at passere:

"Ryd: venstre" fortæller hver person, der flyder til venstre, at de skal justere sig bag det første element, der flydes til venstre. Afhængig af størrelsen på de to nederste mennesker, kan det være udfordrende for alle normale elementer at klemme igennem og besætte pladsen øverst til højre. Så selv god rulletrappe kan stadig føre til blokeringer.

En af de hyppigste anvendelser af den klare egenskab er "klar: begge dele". Dette giver dig mulighed for at nulstille strømmen af ​​elementer i modsætning til at fortsætte med at opretholde en højre, venstre og normal strøm. Det er ligesom den fyr på rulletrappen, der tager hele pladsen, fordi han bragte kufferten.

Med "klart: begge dele" betyder det ikke noget, hvor den ene fyr står i retning til sin kuffert. Det betyder ikke noget, hvem der står venstre eller højre over ham. Han blokerer stadig for hele rulletrappen. Mennesker, der kommer videre efter ham, bliver nødt til at starte en ny strøm af elementer, der kan omfatte en hvilken som helst af de tre strømme: venstre, højre eller normal.

Han har sluppet for tre-flow-systemet og nulstillet reglerne. Dårligt for folk, der vil løbe rulletrappen op? Jo da. Men det er godt, hvis du vil forhindre nogen i at gå.

Læg mærke til, hvordan dette er forskelligt fra den herre i begyndelsen, der stod midt i rulletrappen, bag en række mennesker, der gjorde det samme. Det var et system med én strømning. "Klar: begge" anerkender, at der kan være op til tre strømme, og blokerer passagen for ethvert element, der følger.

Hvis du nød dette indlæg, kan du også nyde mine andre forklaringer på udfordrende CSS- og JavaScript-emner, såsom positionering, Model-View-Controller og tilbagekald.

Og hvis du tror, ​​at dette kan hjælpe andre mennesker i samme position som dig, så giv det et "hjerte"!

Dette indlæg kom oprindeligt på CodeAnalogies-bloggen.