CSS Floats je pojasnjeno v 5 vprašanjih

CSS "Floats" (plavajoči elementi) so preprosti za uporabo, ko pa se uporabi, učinek, ki ga ima na elemente okoli njega, včasih postane nepredvidljiv. Če ste kdaj naleteli na težave, ki izginjajo bližnjih elementov ali plovcev, ki se iztekajo kot bolni palec, ne skrbite več.

Ta post pokriva pet osnovnih vprašanj, ki vam bodo pomagala postati strokovnjak za plavajoče elemente.

1. Kateri elementi ne plavajo?
2. Kaj se zgodi z elementom, ko lebdi?
3. Kaj se zgodi s brati in sestrami "Floats"?
4. Kaj se zgodi s staršem »Float«?
5. Kako počistite "Floats"?

Za bralce, ki sprejmejo TL, pristop k življenju, je povzetek blizu konca delovnega mesta.

1. Kateri elementi ne plavajo?

An absolutno ali fiksno nameščen element ne bo plavalo. Torej, ko naslednjič naletite na plovec, ki ne deluje, preverite, ali je v položaj: absolutno ali položaj: fiksno in ustrezno uporabite spremembe.

2. Kaj se zgodi z elementom, ko lebdi?

Ko je element označen kot "float", se premakne v levo ali desno v bistvu do njega udari v steno elementa zabojnika. Druga možnost je, da teče do nje udari drugega plavajočega elementa, ki je že udaril v isto steno. Še naprej se bodo kopičili drug do drugega, dokler ne bo zmanjkalo prostora, in novejši prihodnji bodo premaknjeni navzdol.

Tudi plavajoči elementi ne bo šel nad elemente prej to v kodi, nekaj, kar morate upoštevati pred kodiranjem a “Float” po element, na katerega želite plavati.

Tukaj sta še dve stvari, ki se zgodita plavajočemu elementu, odvisno od vrste elementa, ki se lebdi:

(1) Inline element se bo spremenil v element na ravni bloka ko plava.

Ste se kdaj spraševali, zakaj lahko nenadoma dodelite višino in širino plavajoči razpon? To je zato, ker bodo vsi elementi, ki plujejo, dobili vrednost blok za njegovo zaslon atribut (inline-table bo dobil tabela) ki jih blokirajo ravni elementov.

(2) Blok element nedoločene širine se bo zmanjšal, da bo ustrezal njegovi vsebini, ko bo lebdela.

Običajno, če elementu širine ne podate širine, je njegova širina privzeta vrednost 100%. Toda, ko plava, to ni več tako; polje blokovnega elementa se bo krčilo, dokler njegova vsebina ne bo vidna.

3. Kaj se dogaja s sestrami "Floats"??

Ko se odločite za plavajoč element med kupom elementov, ne skrbite, kako se bo obnašal, njegovo vedenje bo predvidljivo in se bo premaknilo levo ali desno. Kar bi morali resnično razmišljati je kako se bodo bratje in sestre obnašali.

"Floats" imajo najbolj skrbne in poznejše poznejše brate in sestre po vsem svetu. Naredili bodo vse, kar je v njihovi moči, da sprejmejo plavajoči element.

The elemente besedila in vrstice preprosto naredite prostor za "plavajo" in obkrožite "plavajoče" ko je na položaju.

The blok elementi bo šel korak dlje in bo ovijte se okoli "Float" velikodušno, tudi če to pomeni brcanje lastnih otroških elementov, da bi naredili prostor za "Float".

Poglejmo to v poskusu. Spodaj je modra škatla in za njo je rdeča škatla enake velikosti z nekaterimi podrejenimi elementi.

Zdaj pa spustimo modro škatlo in vidimo, kaj se zgodi z rdečo škatlo in njenimi otroki.

Vse bo v redu, ko se bo rdeča škatla ustavila ob modri škatli in za katero lahko uporabite overflow: hidden.

Ko dodate overflow: hidden na element, ki je ovijal float, bo to prenehal. Spodaj si oglejte, kako se obnaša rdeče polje overflow: hidden.

4. Kaj se zgodi s staršem »Float«?

Starši ne skrbijo za svoje "Float" otroke, le da ne smejo iti ven iz svojih levih ali desnih meja.

Običajno blok element nedoločene višine poveča njegovo višino, da se prilagodi njenim podrejenim elementom, vendar to ne velja za otroke »Float«. Če se poveča velikost "Float's", starš ne bo ustrezno povečal svoje višine. To spet lahko rešite z uporabo overflow: hidden v matičnem.

5. Kako počistiti "plavajoče"?

O tem sem že omenil overflow: hidden narediti staršev po višini prilagoditi plavajočega otroka med ustvarjanjem pravega prostora za druge elemente po "Float" in ustaviti brate in sestre iz ovitka "Floats".

Tako ustvarjate element v bližini "Float" brez kompromisov.

Obstaja še en način, kjer elementi ne bodo nikjer blizu njihove "Float" brate in sestre. Z uporabo jasno atribut lahko naredite, da element ne bo v bližini "Float".

jasno: levo; jasno: desno; jasno: oboje; 

levo vrednost izbriše vse "plavajoče" levo od elementa in obratno za prav, in na obeh straneh za oboje. To jasno atribut lahko uporabite na sorodniku, praznem divu ali na psevdo elementu po vaši priročnosti.

Povzetek

1. Absolutni / fiksni elementi ne bodo plavali.
2. "Float" ne gre nad element prej v kodo.
3. Če v posodi ni dovolj prostora, se potisne "Float".
4. Vsi "plovci" so izdelani v elemente na ravni bloka.
5. Če širina ni določena na "Float", se bo zmanjšala, da bo ustrezala vsebini.
6. Kasnejši bratje in sestre "Float" jih bodo obdajali (inline & text) ali jih ovili (bloki).
7. Če želite preprečiti, da bi element ovil "Float", uporabite overflow: hidden.
8. Starši "Float" -ov ne bi povečali svoje višine, da bi ustrezali plovcu.
9. Če želite, da starš poveča svojo višino glede na "Float", uporabite overflow: hidden (ali ustvarite prazno sibling z jasno za njim)
10. Za preprečitev, da bi bil element v bližini "Float", uporabite jasno atribut.