CSS pluta objasnio jahanjem eskalatora

Ako ste ikada skočili na pokretne stepenice, brzo možete shvatiti plove.

Vaš

je gotovo savršen. Odlučili ste uvesti neke floats da popravite odnos između nekoliko elemenata.

Sljedeće što znate, vaši tek plutajući elementi iskaču iz pažljivo odabranog reda i zalijepite se uz bok vašeg diva poput magneta. Na pamet dolazi fraza „nenamjerno ponašanje“.

Osobno sam provodio sate pokušavajući potpuno razumjeti plove. Pročitao sam članak i rekao, "O, ovo ima smisla!" Tada bih se vratio svom kodu, isprobao ga i ... nije uspio. Natrag do ploče za crtanje.

Dat ću sve od sebe da vam poštedim ovu sudbinu.

Plodovi stvaraju naizmjenične tokove. Ovo je najteži dio za razumijevanje. Kad ih jednom predstavite, tada morate napisati svoj kôd tako da obuhvaća do tri toka: normalni, lijevi i desni. Ovo je sasvim novi set pravila, za razliku od manipulacije širinom elemenata ili njihovim pozicioniranjem.

Zapravo su plovci poprilično slični dinamici vožnje eskalatora, a ja ću pokazati kako se mogu koristiti zajedno s jasnim svojstvom za stvaranje kristalno čistih odnosa unutar divsa. Na ovaj način, sljedeći put kada pokušate koristiti floats u vašem kôdu, nećete naići na iznenađenja.

Moram poštovati put za prolaz

Zadani protok elemenata nalik je na gornju sliku. Neki momak stoji u sredini s rukom na ogradama. Zakačio je cijeli pokretni stepenik. Nitko ga ne može proći. Prilično loša etiketa za pokretne stepenice.

On stoji iza gomile drugih ljudi koji rade istu stvar, pa ih ni jedan ne može proći. Ne postoji koncept traka ili osnovne ljudske pristojnosti.

To je scenarij kada uopšte ne koristite plutače.

U redu, sada razgovaramo! Ljudi koji pokazuju određenu razinu svijesti. Volim to vidjeti.

Imamo jednu traku s lijeve strane, a drugu traku formiranu s desne strane. Ostali ljudi se lako mogu kretati oko dvoje ljudi koji stoje i mirno koračaju po eskalaciji, ako žele. Nitko ne blokira tok stojeći u sredini.

Ovo je scenarij kada koristite floats u svom divu. Postoji lijevi i desni tok, a elementi koji nisu plutani lako mogu ispuniti prostor koji ne zauzimaju plutajući elementi.

Plodovi: lijevo i desno

Korištenjem plovka može se uvesti do dva nova toka: lijevo i desno.

A to omogućuje normalnom protoku elemenata, onima bez float vrijednosti, da popunjavaju prostore oko tih elemenata.

Ploveci vam omogućuju stvaranje ovih novih odnosa između tokova.

Da ste usred dizala stajali ljudi, imali biste ograničene mogućnosti za nove strukture. Ali kad imate lijevi i desni stupac, odjednom možete odrediti da određeni ljudi stoje s desne strane, drugi ostaju lijevo, a druga grupa može popuniti praznine.

To vam omogućuje stvaranje čitljivijeg i razumljivijeg koda, jer svojstvo float također daje naznaku odnosa elementa prema okolnim elementima.

Očistite nekretninu

Postoji još jedan bor o kojem još nismo razgovarali: čisto svojstvo. "Clear" omogućuje elementima da odrede gdje se trebaju poravnati u odnosu na plutajuće elemente.

Na prvoj slici odjeljka "Plutaju" dva vozača dizalica su uljudno stajali na svakoj strani eskalatora. To omogućuje drugima da ih prođu i slobodno se kreću onako kako žele.

Recimo da smo umjesto plutajućeg lijevog elementa i jednog plutajućeg desnog elementa imali 3 plutajuća lijeva elementa i 1 s desne strane. Tri plutajuća lijeva elementa složila bi se u liniju na lijevoj strani ako im dodijelimo i svojstvo "jasno: lijevo". Ali ako se vodoravno poravnaju s plutajućim desnim elementom, to može otežati ili čak nemoguće proći normalan protok elemenata:

"Očisti: lijevo" govori svakoj osobi koja pluta ulijevo da se trebaju poravnati iza prvog elementa koji pluta lijevo. Ovisno o veličini dviju osoba, može biti teško da se bilo koji normalni elementi provuku kroz njih i zauzmu prostor u gornjem desnom kutu. Dakle, čak i dobri postupci eskalacije još uvijek mogu dovesti do blokada.

Jedna od najčešćih upotreba jasnog svojstva je "jasno: oboje". To vam omogućuje resetiranje protoka elemenata, za razliku od nastavka održavanja desnog, lijevog i normalnog protoka. Takav je tip na pokretnoj stepenici koji zauzima cijeli prostor jer je donio svoj kofer.

Uz „jasno: oboje“, nije važno gdje taj jedan čovjek stoji orijentirano na svoj kofer. Nije važno tko stoji lijevo ili desno iznad njega. Još uvijek blokira cijeli pokretni stepenik. Ljudi koji se nastave nakon njega morat će pokrenuti novi protok elemenata, koji bi mogao uključivati ​​bilo koji od tri toka: lijevi, desni ili normalni.

Izbjegao je iz sustava s tri protoka i resetirao pravila. Loše za ljude koji žele pokrenuti pokretne stepenice? Naravno. Ali dobro je ako želite nikoga spriječiti u prolazu.

Primijetite kako se to razlikuje od onog jednog gospodina na početku koji je stajao usred pokretne stepenice, iza niza ljudi koji su radili isto. To je bio sustav s jednim protokom. "Jasno: oba" priznaje da mogu biti do tri toka i blokira prolazak bilo kojeg elementa koji slijedi.

Ako ste uživali u ovom postu, možda ćete uživati ​​i u mojim drugim objašnjenjima izazovnih CSS i JavaScript tema, kao što su pozicioniranje, Model-View-Controller i povratne informacije.

A ako mislite da bi ovo moglo pomoći drugim ljudima u istom položaju kao i vi, dajte mu "srce"!

Taj se post izvorno pojavio na blogu CodeAnalogies.