CSS pluta objasnio u 5 pitanja

CSS "Floats" (plutajući elementi) su jednostavni za uporabu, ali kada se jednom upotrijebe, učinak koji ima na elemente oko njega ponekad postanu nepredvidivi. Ako ste ikada naišli na probleme nestajanja u blizini elemenata ili plovaka koji se probijaju poput bolnog palca, ne brinite više.

Ovaj post pokriva pet osnovnih pitanja koja će vam pomoći postati stručnjak za plutajuće elemente.

1. Koji elementi ne plutaju?
2. Što se događa s elementom kada pluta?
3. Što se događa s braćom i sestrama "Floats"?
4. Što se događa s roditeljem "Float"?
5. Kako poništiti "Floats"?

Za čitatelje koji prihvaćaju TL, pristup pristupu životu, nalazi se sažetak pri kraju posta.

1. Koji elementi ne plutaju?

apsolutan ili fiksno postavljeni element neće plutati. Zato sljedeći put kada naiđete na plutaču koja ne radi, provjerite je li u Položaj: apsolutna ili Položaj: fiksna i sukladno tome primijenite promjene.

2. Što se događa s elementom kada pluta?

Kada je element označen kao "float", on se kreće u lijevu ili desnu stranu do njega udara u zid svog kontejnerskog elementa. Alternativno, ona će se izvoditi do nje pogodi drugi plutajući element koji je već udario u isti zid. Nastavit će se gomilati rame uz rame sve dok se prostor ne iscrpi, a noviji dolazni bit će premješten dolje.

Plutajući elementi također neće ići iznad elemenata prije to u kodu, nešto što trebate uzeti u obzir prije kodiranja “Plutati” nakon element na čijoj strani ga želite plutati.

Evo još dvije stvari koje se događaju plutajućem elementu, ovisno o vrsti elementa koji se održava plutajući:

(1) Inline element će se pretvoriti u element na razini bloka kada je plovio.

Jeste li se ikada zapitali zašto odjednom možete dodijeliti visinu i širinu plutajućoj pedalj? To je zbog toga što će svi elementi koji su plutali dobiti vrijednost blok za svoje prikaz atribut (inline-tablica ćemo dobiti stol) što ih blokira elemente razine.

(2) Blok element nespecificirane širine smanjit će se kako bi odgovarao njegovom sadržaju kada je plovio.

Obično, kada ne navedete širinu elementa bloka, njegova je širina zadana 100%. No, kada je plovio, to više nije slučaj; kutija elementa bloka će se smanjiti dok njezin sadržaj ne ostane vidljiv.

3. Što se događa s braćom "Plutajući"?

Kada odlučite plutati element među hrpom elemenata ne brinite o tome kako će se ponašati, njegovo ponašanje će biti predvidljivo i kretat će se lijevo ili desno. Ono o čemu stvarno trebaš razmišljati je kako će se braća i sestre ponašati.

"Plovci" imaju najzagrebljivije i poslušnije kasnije braće i sestre u cijelom svijetu. Učinit će sve što je u njihovoj moći kako bi smjestili plutajući element.

tekst i umetnuti elementi će jednostavno oslobodite mjesta za "Floats" i okružit će "Float" kada je na položaju.

blok elementi će ići korak dalje i hoće zamotajte se oko "Float" -a velikodušno, čak i ako to znači da izbacuje vlastite dijete kako bi se napravilo mjesta za "Float".

Provjerite ovo u eksperimentu. Ispod su plavi okvir i nakon toga je crvena kutija iste veličine s nekim dijete elementima.

Sada, plutajmo plavom kutijom i vidimo što se događa s crvenom kutijom i njezinom djecom.

Sve će biti u redu nakon što crveni okvir prestane obuhvaćati plavu kutiju i za to možete koristiti overflow: hidden.

Kada dodate overflow: hidden na element koji je omotao float, to će prestati. Pogledajte kako se ponaša crveni okvir overflow: hidden.

4. Što se događa s roditeljem "Float"?

Roditelji ne mare mnogo za svoju "Float" djecu, osim što ne bi smjeli izlaziti iz svojih lijevih ili desnih granica.

Obično blok element neodređene visine povećava njegovu visinu kako bi prilagodio svoje podređene elemente, ali to nije slučaj s djecom "Float". Ako se veličina "Float's" poveća, roditelj neće povećati svoju visinu u skladu s tim. To se ponovno može riješiti pomoću overflow: hidden u roditelju.

5. Kako izbrisati "Floats"?

Već sam spomenuo overflow: hidden učiniti roditelja visinom smjestiti plutajuće dijete dok stvara pravi prostor za druge elemente nakon "Float" i zaustaviti braću i sestre od omatanja.

I tako načinite element u blizini "Float" bez kompromisa.

Postoji još jedna metoda u kojoj elementi neće biti ni blizu njihove "Float" braće i sestara. Koristeći čisto atribut možete učiniti elementom slobodnim od blizine "Float".

jasno: lijevo; jasno: pravo; jasno: oboje; 

lijevo vrijednost briše sve "Floats" lijevo od elementa, i obratno za pravo, i na obje strane oba. Ovaj čisto atribut se može koristiti na siblingu, praznom divu ili na pseudo elementu po vašoj pogodnoj.

Sažetak

1. Apsolutni / fiksni elementi neće plutati.
2. "Float" ne ide iznad elementa prije u kodu.
3. Ako u spremniku nema dovoljno mjesta, "Float" će biti pritisnut.
4. Svi "plovci" su napravljeni u elementima na razini bloka.
5. Ako širina nije navedena na "Float", smanjit će se kako bi odgovarala sadržaju.
6. Kasnija braća "Float" će ih ili okružiti (umetnuti i tekst) ili ih prelomiti (blokovi).
7. Za zaustavljanje omotavanja elementa "Float", koristite overflow: hidden.
8. Roditelji "Float" -a ne bi povećali svoju visinu kako bi odgovarali plovku.
9. Da bi roditelj povećao svoju visinu prema "Float", upotrijebite overflow: hidden (ili stvorite praznu braću s čisto nakon toga)
10. Da biste spriječili da se element nalazi u blizini bilo kojeg "Float", upotrijebite čisto atribut.