de Kevin Kononenko

Flotoarele CSS explicate calarind pe o scara rulanta

Flotoarele CSS explicate călărind pe o scară rulantă

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

dvs. este aproape perfect. Decizi să introduci câteva flotante pentru a stabili relația dintre câteva elemente.

Următorul lucru pe care îl știți, elementele dvs. recent plutite sări din comanda aleasă cu grijă și rămân în partea divului ca un magnet. Expresia „comportament neintenționat” îmi vine în minte.

Personal am petrecut ore întregi încercând să înțeleg pe deplin plutitorii. Aș citi un articol și aș spune „Oh, asta are sens!” Apoi mă întorc la codul meu, îl încerc și … nu reușesc. Înapoi la planșă.

O să fac tot posibilul să vă scutesc de această soartă.

Flotoarele creează fluxuri alternative. Acesta este cel mai greu de înțeles. Și odată ce le introduceți, trebuie să vă scrieți codul, astfel încât acesta să cuprindă până la trei fluxuri: normal, stânga și dreapta. Acesta este un set complet nou de reguli, spre deosebire de manipularea lățimii elementelor sau a poziționării acestora.

De fapt, plutitoarele sunt destul de asemănătoare cu dinamica de a merge pe o scară rulantă și voi arăta cum pot fi utilizate alături de clar proprietate de a crea relații clare de cristal în cadrul divs. În acest fel, data viitoare când încercați să utilizați flotante în cod, nu veți întâlni surprize.

Trebuie să respect culoarul de trecere

1611541807 17 Flotoarele CSS explicate calarind pe o scara rulanta

Fluxul implicit de elemente este cam ca imaginea de mai sus. Un tip stă în mijloc cu mâna pe balustradă. Peste toată scara rulantă. Nimeni nu poate trece de el. Foarte slabă etichetă de scară rulantă, într-adevăr.

El stă în spatele unei grămezi de alți oameni care fac același lucru, așa că nici 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 flotante.

1611541808 836 Flotoarele CSS explicate calarind pe o scara rulanta

Bine, acum vorbim! Oameni care arată un anumit nivel de conștientizare. Îmi place să văd asta.

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

Acesta este scenariul când utilizați flotante în div. Există un flux stâng și un flux dreapta, 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 flotantelor poate introduce până la două fluxuri noi: stânga și dreapta.

Flotoarele CSS explicate calarind pe o scara rulanta

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

1611541808 186 Flotoarele CSS explicate calarind pe o scara rulanta

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

Dacă ați avea o singură linie de oameni în mijlocul liftului, ați avea opțiuni limitate pentru noi structuri. Dar când aveți o coloană stângă și dreaptă, puteți specifica brusc 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ă, de asemenea, un indicarea relației unui element cu elementele înconjurătoare.

Proprietatea Clear

Există încă un rid pe care nu l-am discutat încă: proprietate clară. „Clear” permite elementelor să specifice unde ar trebui să se alinieze în comparație cu elementele plutite.

În prima poză a secțiunii „Flotoare”, cei doi călăreți de scări rulante stăteau cu amabilitate de fiecare parte a scării rulante. Acest lucru le permite celorlalți să le treacă și să se miște liber, după cum doresc.

Să spunem că, în loc să avem un element stâng flotat și un element drept flotat, am avut în schimb 3 elemente stânga plutitoare și 1 în dreapta. Cele trei elemente flotante din stânga s-ar strânge într-o linie din stânga dacă le dăm și proprietatea „clear: left”. Dar dacă s-ar alinia orizontal cu elementul drept plutitor, ar putea face foarte dificil sau chiar imposibil să treacă fluxul normal de elemente:

1611541809 66 Flotoarele CSS explicate calarind pe o scara rulanta

„Clear: left” spune fiecărei persoane care pluteste la stânga că trebuie 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 element normal să se strecoare și să ocupe spațiul din dreapta sus. Deci, chiar și bunele practici ale scărilor rulante pot duce în continuare la blocaje.

Una dintre cele mai frecvente utilizări ale proprietății clare este „clară: ambele”. Acest lucru vă permite să resetați fluxul de elemente, spre deosebire de continuarea menținerii unui flux drept, stâng și normal. E cam ca tipul acela de pe scara rulantă care ocupă tot spațiul pentru că și-a adus valiza.

1611541809 646 Flotoarele CSS explicate calarind pe o scara rulanta

Cu „clar: ambele”, nu contează unde se află acel tip orientat spre valiza sa. Nu contează cine stă deasupra lui la stânga sau la dreapta. Încă blochează întreaga scară rulantă. Oamenii care urmează 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 persoanele care doresc să urce pe scara rulantă? Sigur. Dar este bine dacă vrei să oprești pe cineva să treacă.

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

Dacă ți-a plăcut această postare, s-ar putea să te bucuri și de mine alte explicații de subiecte provocatoare CSS și JavaScript, cum ar fi poziționarea, Model-View-Controller și apeluri de apel.

Și dacă credeți că acest lucru ar putea ajuta alte persoane în aceeași poziție ca dvs., acordați-i o „inimă”!

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

#Flotoarele #CSS #explicate #călărind #scară #rulantă

Flotoarele CSS explicate călărind pe o scară rulantă

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.