CSS plūdės paaiškintos 5 klausimuose

„CSS“ „Floats“ (plaukiojantieji elementai) yra paprasta naudoti, tačiau, kai jie naudojami, poveikis aplinkiniams elementams kartais tampa nenuspėjamas. Jei kada nors susidūrėte su netoliese esančių elementų išnykimo problemomis ar plūduriuojančiais, kaip skylė nykščiu, nebijokite..

Šis pranešimas apima penkis pagrindinius klausimus, kurie padės jums tapti plaukiojančių elementų ekspertu.

1. Kokie elementai nėra plūduriuojami?
2. Kas nutinka elementui, kai jis plaukioja?
3. Kas atsitinka su „Floats“ broliais ir seserimis?
4. Kas nutinka „Float“ tėvui?
5. Kaip išvalyti „plūdes“?

Skaitytojams, kurie prideda TL, dr. Požiūrį į gyvenimą, yra netoli santraukos pabaigos esanti santrauka.

1. Kokie elementai nėra plūduriuojami?

An absoliutus arba pastatytas elementas nebus plaukti. Taigi kitą kartą, kai susidursite su neveikiančiu plūduriu, patikrinkite, ar jis yra pozicija: absoliutus arba padėtis: fiksuota ir pritaikykite pakeitimus.

2. Kas nutinka elementui, kai jis plaukioja?

Kai elementas yra pažymėtas „float“, jis iš esmės eina į kairę arba į dešinę, kol jis yra pasiekia konteinerio elemento sieną. Arba jis bus rodomas iki jo pasiekia kitą plaukiojančią dalį, kuri jau pasiekė tą pačią sieną. Jie išliks vienas šalia kito, kol baigsis erdvė, o naujesni atvykstantys bus perkelti.

Be to, plaukiojantys elementai nebus virš elementų anksčiau ji kode, ką reikia apsvarstyti prieš koduojant a “Plūdė” po to elementas, kurio pusėje norite jį plaukti.

Toliau pateikiami dar du dalykai, kurie vyksta plaukiojančiam elementui, priklausomai nuo to, kokio tipo elementas plaukioja:

(1) Inline elementas taps bloko lygio elementu plaukiant.

Kada nors susimąstėte, kodėl staiga jūs galite priskirti aukštį ir plotį kintamajam span? Taip yra todėl, kad visi elementai, kai plaukioja, gaus vertę blokuoti už tai ekranas atributas (inline-table gaus lentelė) juos blokuoti lygmens elementais.

(2) Nenustatyto pločio bloko elementas susitrauks, kad atitiktų jo turinį, kai jis plaukioja.

Paprastai, kai nenurodote bloko elemento pločio, jo plotis yra numatytasis 100%. Bet kai jis plaukioja, tai ne daugiau; bloko elemento langelis susitraukia, kol jo turinys bus matomas.

3. Kas atsitinka „Plūdės“ broliams ir seserims?

Kai nuspręsite plaukti elementą tarp elementų, nesijaudinkite, kaip jis elgsis, jo elgesys bus nuspėjamas ir judės į kairę arba į dešinę. Ką turėtumėte iš tikrųjų galvoti apie tai kaip broliai ir seserys elgsis.

„Plūdės“ turi rūpestingiausius ir paklusnius vėlesnius brolius ir seserus visame pasaulyje. Jie darys viską, kas įmanoma, kad tilptų plūduriuojančio elemento.

The teksto ir inline elementai bus tiesiog nuvažiuoti į „plūdes“ ir apims „Float“ kai jis yra padėtyje.

The blokiniai elementai bus žingsnis toliau ir bus apvyniokite aplink „Float“ turtinga, net jei tai reiškia savo vaikų elementų išspaudimą, kad būtų sukurta erdvė „Float“.

Patikrinkime tai eksperimente. Žemiau yra mėlyna dėžutė ir po to yra raudonos spalvos langelis, kurio dydis yra vienodas su kai kuriais vaikų elementais.

Dabar, plaukime mėlyną langelį ir pažiūrėkime, kas atsitinka su raudonuoju langeliu ir jo vaikais.

Viskas bus gerai, kai raudonasis langelis nustos apimti mėlyną langelį ir už jį galite naudoti perteklius paslėptas.

Kai pridėsite perteklius paslėptas į elementą, kuris buvo apvyniotas plūduriu, tai nustos veikti. Žiūrėkite žemiau, kaip veikia raudonasis langelis perteklius paslėptas.

4. Kas nutinka „Float“ tėvui?

Tėvai nerūpi daug apie savo „plaukiojančius“ vaikus, išskyrus tai, kad jie neturėtų išeiti iš kairės ar dešinės ribų.

Paprastai neapibrėžto aukščio bloko elementas padidina jo aukštį, kad tilptų vaiko elementus, tačiau tai nėra „Float“ vaikų atveju.. Jei padidėja „Plūdės“ dydis, jo tėvas atitinkamai nepadidins jo aukščio. Tai vėl galima išspręsti naudojant perteklius paslėptas tėvai.

5. Kaip išvalyti „plūdes“?

Aš jau minėjau perteklius paslėptas tėvų aukštis, kad jis būtų tinkamas plaukiojančiam vaikui, o po „Plaukimas“ sukuriant tinkamą vietą kitiems elementams ir sustabdant brolius ir seseris nuo pakavimo..

Ir taip jūs sukuriate elementą netoli „Float“ be jokių kompromisų.

Yra dar vienas metodas, kai elementai netgi nebus šalia jų „plaukiojančių“ brolių ir seserų. Naudojant aišku atributas, kurį galite padaryti elementą be „Float“ buvimo.

aišku: kairėje; aišku: teisė; aišku: abu; 

kairėje vertė išvalo visus elementus kairėje pusėje esančius „plūdes“ ir atvirkščiai teisė, ir abiejose pusėse abu. Tai aišku atributas gali būti naudojamas broliui, tuščiam divui arba pseudo elementui kaip jūsų patogus.

Santrauka

1. Absoliutus / Fiksuoti elementai nebus plaukti.
2. „Plūdurys“ neviršija elemento anksčiau kodą.
3. Jei talpykloje nėra pakankamai vietos, bus nuspaustas „Float“.
4. Visi „plūdurai“ gaminami į bloko lygio elementus.
5. Jei „Float“ nenurodytas pločio, jis sumažės, kad atitiktų turinį.
6. Vėlesni „Plūdės“ broliai ir seserys juos supa (inline & text) arba juos apvynios (blokai).
7. Jei norite sustabdyti elemento „plūdės“ įvyniojimą, naudokite perteklius paslėptas.
8. „Plūdės“ tėvai nepadidins jo aukščio, kad tilptų plūdę.
9. Jei norite, kad tėvas padidintų savo aukštį pagal „Plūdę“, naudokite perteklius paslėptas (arba sukurti tuščią seserį aišku po jo)
10. Jei norite, kad elementas nebūtų šalia „Float“, naudokite aišku atributas.