CSS-kellumat selitetään viidessä kysymyksessä

CSS "Floats" (kelluvat elementit) ovat helppokäyttöisiä, mutta kun niitä käytetään, sen vaikutukset sen ympärillä oleviin elementteihin ovat joskus arvaamattomia. Jos olet koskaan törmännyt lähellä olevien elementtien katoamiseen liittyviin ongelmiin tai kelluu, että särkyisi kuin kipeä peukalo, älä enää huoli.

Tämä viesti kattaa viisi peruskysymystä, jotka auttavat sinua tulemaan kelluvan elementin asiantuntijaksi.

1. Mitkä elementit eivät ole kelluvia?
2. Mitä tapahtuu elementille, kun se kelluu?
3. Mitä tapahtuu "Floatsin" sisaruksille?
4. Mitä tapahtuu "Floatin" vanhemmalle?
5. Miten tyhjennät "Floats"?

Lukijoille, jotka lisäävät TL: n elämää, on tiivistelmä postin lopussa.

1. Mitkä elementit eivät ole kelluvia?

absoluuttinen tai kiinteästi sijoitettu elementti ei float. Joten seuraavan kerran, kun kohtaat kelluvan, joka ei toimi, tarkista, onko se sisään kanta: absoluuttinen tai position: fixed ja soveltaa muutoksia vastaavasti.

2. Mitä tapahtuu elementille, kun se kelluu?

Kun elementti on merkitty "float", se kulkee joko vasemmalle tai oikealle, kunnes se on osuu säiliön elementin seinään. Vaihtoehtoisesti se toimii vasta siihen saakka osuu toiseen kelluvaan elementtiin, joka on jo osunut samaan seinään. He pitävät kasaantumista vierekkäin, kunnes tila loppuu, ja uudemmat tulevat siirretään alas.

Myös kelluvat elementit ei mene elementtien yläpuolelle ennen se koodissa, mitä sinun täytyy harkita ennen koodausta a “Kellua” jälkeen elementti, jonka puolelle haluat kellua.

Tässä on vielä kaksi asiaa, jotka tapahtuvat kelluvan elementin kanssa riippuen siitä, minkä tyyppistä elementtiä pidetään kelluvana:

(1) Sisäinen elementti muuttuu lohkotason elementiksi kun kelluu.

Oletko koskaan miettinyt, miksi yhtäkkiä voit määrittää korkeuden ja leveyden kelluvaan jänneväli? Tämä johtuu siitä, että kaikki elementit, kun kelluu, saavat arvon lohko sen puolesta näyttö määrite (inline-taulukko saavat pöytä) tehdä niistä lohkotason elementtejä.

(2) Määrittämättömän leveyden lohkoelementti kutistuu sen sisällön mukaiseksi, kun se kelluu.

Yleensä, kun et määritä lohkoa lohkoelementille, sen leveys on oletus 100%. Mutta kun kelluu, se ei ole enää asia; lohkoelementin laatikko kutistuu, kunnes sen sisältö pysyy näkyvissä.

3. Mitä tapahtuu "Floatsin" sisaruksille?

Kun päätät uida elementin joukon elementtejä, älä huolehdi siitä, miten se käyttäytyy, sen käyttäytyminen on ennustettavissa ja joko liikkuu vasemmalle tai oikealle. Mitä sinun pitäisi todella ajatella, on kuinka sisarukset sen jälkeen, kun he aikovat käyttäytyä.

"Floats": lla on kaikkein huolehtivia ja tottelevaisia ​​myöhemmin sisaruksia koko maailmassa. He tekevät kaikkensa voidakseen sijoittaa kelluvan elementin.

tekstin ja inline-elementtejä yksinkertaisesti tee "Floats" -tilaan ja ympäröi "Float" kun se on paikallaan.

lohkoelementtejä menee askeleen pidemmälle ja tahtoo kääri itsensä "Floatin" ympärille avokätisesti, vaikka se merkitsisi omien lapsielementtien laukaisemista, jotta "Float" -tilan tilaa.

Tarkistetaan tämä kokeessa. Alla on sininen laatikko ja sen jälkeen se on saman kokoinen punainen laatikko, jossa on joitakin lapsielementtejä.

Nyt leijukaa sininen laatikko ja katso, mitä tapahtuu punaiseen laatikkoon ja sen lapsiin.

Kaikki on kunnossa, kun punainen laatikko pysähtyy sinistä laatikkoa ja sitä varten ylivuoto piilotettu.

Kun lisäät ylivuoto piilotettu elementille, joka on kääritty uimaan, se lopettaa näin. Katso alla, miten punainen laatikko toimii ylivuoto piilotettu.

4. Mitä tapahtuu "Floatin" vanhemmalle?

Vanhemmat eivät välitä paljon "Float" -lapsistaan, paitsi että heidän ei pitäisi mennä vasemmalta tai oikealta rajoistaan.

Tyypillisesti määrittelemättömän korkeuden lohkoelementti kasvattaa sen korkeutta lapsielementtien mukauttamiseksi, mutta tämä ei päde lapsille.. Jos "Float's" -koko kasvaa, sen vanhempi ei lisää sen korkeutta vastaavasti. Tämä voidaan jälleen ratkaista käyttämällä ylivuoto piilotettu vanhemmassa.

5. Kuinka "Floats" poistetaan?

Olen jo maininnut käytön ylivuoto piilotettu jotta vanhemman korkeus voidaan asentaa kelluvalle lapselle samalla, kun se luo oikean tilan muille elementeille "Float" -tilan jälkeen ja lopettaa sisarukset pakkaamasta "Floats".

Ja näin teet elementin elämään lähellä "Floatia" ilman kompromisseja.

On toinenkin menetelmä, jossa elementit eivät edes ole missään lähellä heidän "Float" sisaruksiaan. Käyttämällä asia selvä määritteellä voit tehdä elementin vapaaksi olemasta lähellä "Float" -ominaisuutta.

kirkas: vasen; selkeä: oikea; Tyhjennä molemmat; 

vasen arvo tyhjentää kaikki "Floats" elementit elementin vasemmalla puolella ja päinvastoin oikea, ja molemmin puolin molemmat. Tämä asia selvä attribuuttia voidaan käyttää sisarella, tyhjällä divilla tai pseudoelementillä kätevän.

Yhteenveto

1. Absoluuttiset / kiinteät elementit eivät pääse kellumaan.
2. "Float" ei mene elementin yläpuolelle ennen se koodissa.
3. Jos säiliössä ei ole tarpeeksi tilaa, "Float" työnnetään alas.
4. Kaikki "kellukkeet" tehdään lohkotason elementeiksi.
5. Jos leveyttä ei ole määritetty "Float" -tilassa, se kutistuu sisällön mukaan.
6. "Float": n myöhemmät sisarukset ympäröivät niitä (inline & text) tai käärittävät ne (lohkot).
7. Jos haluat pysäyttää elementin "Float": n käärimisen, käytä ylivuoto piilotettu.
8. "Float": n vanhemmat eivät nosta sen korkeutta kellumaan sopivaksi.
9. Jotta vanhempi voisi kasvattaa korkeuttaan "Float" -kohdan kohdalla, käytä ylivuoto piilotettu (tai luo tyhjä sisar asia selvä sen jälkeen)
10. Jos haluat estää elementin olevan lähellä "Float" -laitetta, käytä asia selvä ominaisuus.