Plute CSS explicate prin călăritul unui scară rulantă

Dacă ați sărit vreodată pe o scară rulantă, atunci puteți înțelege rapid plutitoarele.

dvs. este aproape perfect. Decideți să introduceți câteva flotări pentru a remedia relația dintre câteva elemente.

Următorul lucru pe care îl știi, elementele tale nou plutite sări din ordinea ta aleasă cu grijă și se lipesc de partea divă ca un magnet. Expresia „comportament nedorit” îmi vine în minte.

Personal am petrecut ore întregi încercând să înțeleg pe deplin plutelile. Am citit un articol și am spus: „O, asta are sens!” Apoi mă întorc la codul meu, îl încerc și ... eșuează. Înapoi la tablă.

Voi face tot posibilul să vă scutesc de această soartă.

Plutile creează fluxuri alternative. Aceasta este partea cea mai grea de înțeles. Și după ce le introduci, trebuie să-ți scrii codul astfel încât să reprezinte până la trei fluxuri: normal, stânga și dreapta. Acesta este un set cu totul nou de reguli, spre deosebire de manipularea lățimii elementelor sau a poziționării lor.

De fapt, plutitoarele sunt destul de asemănătoare cu dinamica călăriei unei scări rulante și voi arăta cum pot fi utilizate alături de proprietatea clară pentru a crea relații limpede în cadrul div-urilor. În felul acesta, următoarea dată când încercați să folosiți plutitoare în codul dvs., nu veți întâmpina surprize.

Gotta respectă banda de trecere

Fluxul implicit al elementelor este similar cu imaginea de mai sus. Un tip stă la mijloc cu mâna pe balustradă. El agăță întreaga scară rulantă. Nimeni nu-l poate trece. Destul de slabă etichetă a scărilor rulante, într-adevăr.

El stă în spatele unei grămadă de alte persoane care fac același lucru, așa că nimeni nu le poate trece. Nu există un concept de benzi sau decență umană de bază.

Acesta este scenariul când nu utilizați deloc plutitoare.

Bine, acum vorbim! Oamenii care prezintă un anumit nivel de conștientizare. Îmi place să vezi asta.

Avem o bandă formată în stânga și o altă bandă formată în dreapta. Alți oameni se pot deplasa cu ușurință în jurul celor două persoane care stau nemișcate și merg mai repede pe scară rulantă, dacă doresc. Nimeni nu blochează fluxul stând în mijloc.

Acesta este scenariul când utilizați plute în div. Există un flux stâng și un flux drept, iar elementele care nu sunt plutite pot umple cu ușurință spațiul care nu este luat de elementele plutite.

Plute: stânga și dreapta

Utilizarea plutitoarelor poate introduce până la două fluxuri noi: stânga și dreapta.

Și acest lucru permite fluxul normal de elemente, cele fără o valoare flotantă, să completeze spațiile din jurul acestor elemente.

Plutile vă permit să creați aceste noi relații între fluxuri.

Dacă ai avea o linie de oameni în mijlocul liftului, ai avea opțiuni limitate pentru noile structuri. Dar când aveți o coloană din stânga și din dreapta, puteți specifica dintr-o dată că anumite persoane stau în dreapta, altele rămân la stânga și un alt grup poate completa golurile.

Acest lucru vă permite să creați un cod mai ușor de citit și de înțeles, deoarece proprietatea float oferă și o indicație a relației unui element cu elementele din jur.

Proprietatea Clear

Mai există încă o rid despre care nu am discutat încă: proprietatea clară. „Clear” permite elementelor să specifice unde trebuie să se alinieze în comparație cu elementele plutite.

În prima imagine a secțiunii „Plute”, cei doi călăreți ai scării rulante stăteau curtenitori de fiecare parte a scării rulante. Acest lucru le permite altora să le treacă și să se miște liber așa cum doresc.

Să zicem că în loc să avem un element din stânga plutit și unul din dreapta plutit, în schimb am avut 3 elemente din stânga plutite și 1 din dreapta. Cele trei elemente din stânga plutite s-ar stiva într-o linie din stânga dacă le dăm și proprietatea „clar: stânga”. Dar dacă s-au aliniat orizontal cu elementul drept plutit, ar putea face foarte dificil sau chiar imposibil să treacă fluxul normal de elemente:

„Clear: left” spune fiecărei persoane care plutesc spre stânga că ar trebui să se alinieze în spatele primului element care este plutit la stânga. În funcție de dimensiunea celor două persoane de jos, ar putea fi dificil ca orice elemente normale să se strecoare și să ocupe spațiul din dreapta sus. Deci, chiar și practicile bune ale scărilor rulante pot duce la blocaje.

Una dintre cele mai frecvente utilizări ale proprietății clare este „clar: ambele”. Aceasta vă permite să resetați fluxul de elemente, spre deosebire de menținerea unui flux drept, stânga și normal. Este un tip ca acel tip de pe scară rulantă care ocupă întreg spațiul pentru că și-a adus valiza.

Cu „clar: amândouă”, nu contează locul în care acel tip stă orientat spre valiza lui. Nu contează cine stă stânga sau dreapta deasupra lui. Încă blochează întreaga scară rulantă. Persoanele care pornesc după el vor trebui să înceapă un nou flux de elemente, care ar putea include oricare dintre cele trei fluxuri: stânga, dreapta sau normală.

A scăpat de sistemul cu trei fluxuri și a resetat regulile. Rău pentru oamenii care doresc să ruleze pe scară rulantă? Sigur. Dar este bine dacă vrei să oprești pe cineva să treacă.

Observați cum aceasta este diferită de un domn la început care stătea în mijlocul scării rulante, în spatele unei linii de oameni care făceau același lucru. Acesta a fost un sistem cu un singur flux. „Clar: ambele” recunoaște că pot exista până la trei fluxuri și blochează trecerea oricărui element care urmează.

Dacă v-a plăcut această postare, s-ar putea să vă bucurați și de alte explicații ale subiectelor CSS și JavaScript provocatoare, cum ar fi poziționarea, modelul de vizualizare-controler și apelurile de apel.

Și dacă credeți că acest lucru ar putea ajuta alți oameni în aceeași poziție ca voi, dați-i o „inimă”!

Această postare a apărut inițial pe blogul CodeAnalogies.