CSS-ujukid selgitatud 5 küsimuses

CSS "Ujukid" (ujuvad elemendid) on lihtne kasutada, kuid kui neid on kasutatud, siis mõnikord on see mõju ümbritsevatele elementidele ettearvamatuks. Kui te olete kunagi kohanud lähedal asuvate elementide kadumise või ujukite, mis tõmbavad välja nagu valus pöial, probleeme, ärge enam muretsege.

See postitus hõlmab viit põhiküsimust, mis aitavad teil saada ujuva elemendi eksperdiks.

1. Millised elemendid ei ujuki?
2. Mis juhtub elemendiga, kui see hõljub?
3. Mis juhtub "Floatside" vendadega?
4. Mis juhtub "Float" vanemaga?
5. Kuidas kustutada "Floats"?

Lugejatele, kes lisavad TL-i elule lähenemise, on postituse lõpus kokkuvõte.

1. Millised elemendid ei uju?

An absoluutne või fikseeritud paigutatud element ei uju. Nii et järgmine kord, kui kohtate ujukiga, mis ei tööta, kontrollige, kas see on sisse lülitatud positsioon: absoluutne või positsioon: fikseeritud ja rakendage muudatusi vastavalt.

2. Mis juhtub elemendiga, kui see hõljub?

Kui element on märgistatud "float", siis see töötab kas vasakule või paremale, kuni see on tabab konteineri elemendi seina. Teise võimalusena töötab see seni lööb teise ujuva elemendi, mis on juba sama seinale tabanud. Nad hoiavad kõrvuti kõrvuti, kuni ruum otsa saab, ja uuemad sissetulevad isikud liiguvad alla.

Ujuvad elemendid ei lähe elementide kohal enne seda koodi, mida on vaja enne kodeerimist a “Ujuda” pärast seda element, mille külge soovite seda hõljuda.

Siin on veel kaks asjad, mis juhtuvad ujuva elemendiga, sõltuvalt sellest, millist tüüpi elementi ujutakse:

(1) Inline element muutub ploki tasandi elemendiks ujudes.

Kunagi mõelnud, miks äkki sa oled võimeline määrama ujuvale kõrgusele ja laiusele span? Seda seetõttu, et kõik ujuvad elemendid saavad selle väärtuse blokeeri selle eest kuva atribuut (inline-table saavad tabel) muuta need blokeerituks.

(2) Määratlemata laiusega ploki element kahaneb, et see sobiks selle sisu peale.

Tavaliselt, kui sa ei määra ploki elemendi laiust, on selle laius 100%. Aga kui see on ujutatud, pole see enam nii; ploki elemendi kasti kahaneb, kuni selle sisu jääb nähtavaks.

3. Mis juhtub "Ujukite" vendadega?

Kui otsustate ujuda elemendi vahel elementide hulgast, ärge muretsege, kuidas see käitub, selle käitumine on prognoositav ja liigub vasakule või paremale. Mida sa tegelikult peaksid mõtlema kuidas õed-vennad pärast seda käituvad.

"Ujukid" on kogu maailma kõige hoolivamad ja kuulekamad hilisemad õed-vennad. Nad teevad kõik endast oleneva ujuva elemendi vastuvõtmiseks.

The teksti ja inline elemente lihtsalt tee "Ujukid" ja ümbritseb "Float" kui see on paigas.

The plokkelemendid läheb sammu edasi ja tahab murda ümber "Float" heldelt, isegi kui see tähendab oma lastelementide väljatõmbamist, et teha ruumi "Float" -ile..

Vaatame seda eksperimendis. Allpool on sinine kast ja pärast seda on punase kastiga sama suurusega mõned lapse elemendid.

Nüüd libistame sinine kast ja vaata, mis juhtub punase kastiga ja selle lastega.

Kõik on korras, kui punane kast lakkab sinise kasti ja selle eest, mida saab kasutada ülevool: peidetud.

Kui lisate ülevool: peidetud elemendile, mis on ujuki pakendanud, lõpetab see nii. Vaadake allpool, kuidas punane kast käitub ülevool: peidetud.

4. Mis juhtub "Float" vanemaga?

Vanemad ei hooli oma "Float" lastest, välja arvatud see, et nad ei tohiks oma vasakust või parastest piiridest välja minna.

Tüüpiliselt tõstab määramata kõrgusega plokk selle kõrgust, et mahutada oma lapse elemendid, kuid see ei kehti "Float" laste puhul.. Kui "ujuki" suurus suureneb, ei suurenda tema vanem vastavalt selle kõrgust. Seda saab uuesti lahendada kasutades ülevool: peidetud emaettevõttes.

5. Kuidas eemaldada "Floats"?

Olen juba kasutanud ülevool: peidetud vanemate kõrguse muutmine sobib ujuvale lapsele, luues parajasti ruumi teistele elementidele pärast "Float" ja peatada õed-vennad pakendamisest "Ujub.

Ja see, kuidas te teete elementi "Float" lähedal ilma kompromissideta.

Seal on veel üks meetod, kus elemendid ei ole isegi "Float" õdede-vendade lähedal. Kasutades selge atribuut, mille abil saab elementi "Float" lähedal olla.

selge: vasakule; selge: õigus; selge: mõlemad; 

vasakule väärtus kustutab elemendi vasakul pool olevad "ujukid" ja vastupidi õigus, ja mõlemal poolel mõlemad. See selge atribuuti saab kasutada õdede, tühjade divide või pseudoelementide puhul nagu teie mugav.

Kokkuvõte

1. Absoluutsed / fikseeritud elemendid ei ujuki.
2. "Ujuk" ei lähe elemendi kohal enne seda koodis.
3. Kui mahutis ei ole piisavalt ruumi, lükatakse alla "Float".
4. Kõik "ujukid" on tehtud plokk-tasandi elementideks.
5. Kui laius ei ole "Float" -is määratud, väheneb see sisule.
6. "Ujuki" hilisemad õed-vennad ümbritsevad neid (inline & text) või mähkivad need (plokid).
7. Kui soovite peatada elementi "Float" pakendamisest, kasuta ülevool: peidetud.
8. "Ujuki" vanemad ei suurendaks selle kõrgust ujuki jaoks.
9. Kui soovite, et lapsevanem tõstaks oma kõrgust "ujuva" järgi, kasuta ülevool: peidetud (või looge tühi vend) selge pärast seda)
10. Et vältida elementi "Float" lähedal olekut, kasutage selge atribuut.