Kellua - CSS-temppuja

floatOmaisuus CSS käytetään paikannukseen ja ulkoasun verkkosivuilla.

.module ( float: left; )

Arvot

• none: elementti ei kellu. Tämä on alkuarvo.
• left: kelluttaa elementin säiliön vasemmalle puolelle.
• right: kelluttaa elementin säiliön oikealle puolelle.
• inherit: elementti perii vanhemmansa kelluntasuunnan.

Huomaa: Kelluva elementti on automaattisesti display: block;

Mitä kelluva tarkoittaa?

Ymmärtääksemme tarkoituksen ja alkuperän floatvoimme etsiä tulostaa suunnittelun. Tulostusasettelussa kuvat voidaan asettaa sivulle siten, että teksti kiertyy niiden ympärille tarpeen mukaan. Tätä kutsutaan yleisesti ja asianmukaisesti "tekstin käärinnäksi". Tässä on esimerkki siitä.

Sivun asetteluohjelmissa tekstiä pitäville ruuduille voidaan kertoa, että ne kunnioittavat tekstiä tai ohittavat sen. Tekstin käärinnän huomiotta jättäminen antaa sanojen virrata kuvan yli, ikään kuin sitä ei edes ollut. Tämä on ero sen kuvan välillä, joka on osa sivun kulkua (tai ei). Web-suunnittelu on hyvin samanlainen.

Verkkosuunnittelussa sivuelementit, joihin on sovellettu CSS- floatominaisuutta, ovat aivan kuin kuvat tulostusasettelussa, jossa teksti kulkee niiden ympärillä. Kelluvat elementit ovat edelleen osa verkkosivun kulkua. Tämä on selvästi erilainen kuin absoluuttista sijoittelua käyttävät sivuelementit. Ehdottomasti sijoitetut sivuelementit poistetaan verkkosivun kulusta, kuten silloin, kun tulostusasettelun tekstiruudun käskettiin sivuuttaa sivun rivitys. Ehdottomasti sijoitetut sivuelementit eivät vaikuta muiden elementtien sijaintiin eivätkä muut elementit vaikuta niihin riippumatta siitä, koskettavatko ne toisiaan vai eivät.

Demo

Tässä esittelyssä on artikkeli, jossa on kaksi kuvaa: yksi asetettu float: leftja toinen asetettu float: right. Paina "vaihda kellukkeita" -painiketta vaihtaaksesi kellukkeet pois ja päälle.

Katso CSS-Tricksin kynän kellukkeen esimerkki (@ css-tricks) CodePenistä.

Kelluu asettelua varten

Lukuun ottamatta yksinkertaista esimerkkiä tekstin käärimisestä kuvien ympärille, kellukkeita voidaan käyttää kokonaisten verkkoasettelujen luomiseen .

Kellukkeet ovat hyödyllisiä myös pienemmissä tapauksissa. Otetaan esimerkiksi tämä pieni verkkosivun alue. Jos käytämme floatavatar-kuvaa, kuvan muuttuessa koon teksti muuttuu ruutuun sen mukauttamiseksi:

Tämä sama asettelu voidaan saavuttaa käyttämällä suhteellista sijaintia säiliössä ja absoluuttista sijaintia myös avatarissa. Mutta kun se tehdään näin, avatar ei vaikuta tekstiin, eikä se kykene heijastamaan koon muutosta.

Demo

Tämä esittely näyttää avatarin, float: leftjota on käytetty. Paina "vaihda kuvakoko" -painiketta nähdäksesi laajemman version avatar-kuvasta. Huomaa, että teksti heijastuu kuvan sijoittamiseksi sen sijaan, että se kulkisi kuvan päälle.

Katso CSS-Tricks (@ css-tricks) -kynän Float-esittely CodePenistä.

Kellukkeen tyhjentäminen

Floatin sisaromaisuus on clear. Elementti, jolle on asetettu clearominaisuus, ei liiku kellukkeen viereen ylöspäin kuten kelluva haluaa, vaan liikkuu itsensä alas kellukkeen ohi. Jälleen kuva on hyödyllinen kuin sanat:

Yllä olevassa esimerkissä sivupalkki kelluu oikealle ja on lyhyempi kuin pääsisältöalue. Alatunnistetta vaaditaan sitten hyppäämään ylös käytettävissä olevaan tilaan kellukkeen vaatimalla tavalla. Tämän ongelman korjaamiseksi alatunniste voidaan tyhjentää sen varmistamiseksi, että se pysyy molempien kelluvien sarakkeiden alapuolella.

#footer ( clear: both; )

Clearilla on myös neljä kelvollista arvoa. Arvoa bothkäytetään yleisimmin, mikä tyhjentää kelluvat kumpaankin suuntaan. Arvot leftja rightniitä voidaan käyttää uimurin tyhjentämiseen vastaavasti. Alkuarvo on none, mikä on yleensä tarpeetonta, ellei sitä käytetä clearasetetun arvon nimenomaiseen poistamiseen . Arvo inheritsaa elementin perimään vanhemman cleararvon. Kummallista kyllä, Internet Explorer ei tue tätä arvoa ennen IE8: ta.

Ainoastaan lefttai rightkellukan puhdistaminen, vaikka sitä harvemmin nähdään luonnossa, on ehdottomasti sen käyttötarkoituksia.

Suuri romahdus

Yksi hämmentävämmistä asioista uimurien kanssa työskentelyssä on, kuinka ne voivat vaikuttaa niitä sisältävään elementtiin (niiden "pääelementtiin"). Jos vanhempi elementti ei sisällä muuta kuin kelluvia elementtejä, sen korkeus romahtaa tyhjäksi. Tämä ei ole aina ilmeistä, jos vanhempi ei sisällä visuaalisesti havaittavaa taustaa, mutta on tärkeää olla tietoinen siitä.

Niin ikään kuin intuitiivinen kuin romahtaminen saattaa tuntua, vaihtoehto on huonompi. Harkitse tätä skenaariota:

Jos ylhäällä oleva lohkoelementti olisi automaattisesti laajentunut kelluvan elementin mukaiseksi, tekstien kulkussa kappaleiden välillä olisi luonnoton välimatka, ilman käytännön tapaa korjata sitä. Jos näin olisi, me suunnittelijat valittaisimme tästä käyttäytymisestä paljon kovemmin kuin romahduksesta.

Romahtaminen on melkein aina käsiteltävä outojen asettelu- ja selainongelmien välttämiseksi. Me korjata tyhjentämällä float jälkeen kelluvan elementtejä säiliössä mutta ennen tiivistä säiliön.

Tekniikat kellukkeiden puhdistamiseksi

Jos olet tilanteessa, jossa tiedät aina, mikä menestyvä elementti tulee olemaan, voit käyttää clear: both;arvoa siihen elementtiin ja jatkaa liiketoimintaasi. Tämä on ihanteellinen, koska se ei vaadi hienoja hakkereita eikä muita elementtejä, mikä tekee siitä täysin semanttisen. Tietysti asiat eivät tyypillisesti toimi tällä tavalla, ja työkalupakissamme on oltava enemmän float-selvitystyökaluja.

• Tyhjä div-menetelmä on kirjaimellisesti tyhjä div. . Joskus näet
elementin tai jonkin muun satunnaisen elementin, jota käytetään, mutta div on yleisin, koska sillä ei ole selaimen oletustyyliä, sillä ei ole mitään erityisiä toimintoja ja että sitä todennäköisesti ei yleensä muotoiltu CSS: llä. Semanttiset puristit pilkkaavat tätä menetelmää, koska sillä ei ole sivulle asiayhteyteen liittyvää merkitystä ja se on tarkoitettu vain esittelyä varten. Tietysti tiukimmassa mielessä he ovat oikeassa. Mutta se saa työn tehtyä eikä vahingoita ketään.
• Ylivuotomenetelmä perustuu overflowCSS-ominaisuuden asettamiseen pääelementille. Jos tämä ominaisuus on asetettu ylätason elementille autotai sen hiddenpäälle, ylätaso laajenee sisältämään kellukkeet ja tyhjentää sen tehokkaasti seuraaville elementeille. Tämä menetelmä voi olla kauniisti semanttinen, koska se ei välttämättä vaadi lisäelementtejä. Kuitenkin, jos huomaat lisääväsi uuden divvain tämän soveltamiseksi, se on yhtä epätemanttinen kuin tyhjä divmenetelmä ja vähemmän sopeutuva. Muista myös, että ylivuoto ei ole tarkoitettu erityisesti kellukkeiden puhdistamiseen. Varo piilottamasta sisältöä tai käynnistämästä ei-toivottuja vierityspalkkeja.
• Helppo puhdistusmenetelmä (tunnetaan myös nimellä ”clearfix”) käyttää älykäs CSS-pseudovalitsinta () kelluvien :aftertyhjentämiseen. Sen sijaan, että asetat ylivuotoa vanhemmalle, käytät siihen ylimääräistä luokkaa, kuten “clearfix”. Käytä sitten tätä CSS: tä:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Tämä käyttää pientä sisältöä piilotettuna näkyviltä sen jälkeen, kun pääelementti tyhjentää kellukkeen. Tämä ei ole aivan koko tarina, koska vanhemmille selaimille on käytettävä lisäkoodia. Huomaa: Katso myös tämä katkelma, joka seuraa viimeisimpiä ja parhaimpia selkeitä korjauksia, mukaan lukien uudempi "micro clearfix".

Eri skenaariot edellyttävät erilaisia ​​float-selvitysmenetelmiä. Otetaan esimerkiksi ruudukko lohkoja, kukin erityyppisiä.

Jotta samankaltaiset lohkot voidaan yhdistää visuaalisesti paremmin, haluamme aloittaa uuden rivin haluamallamme tavalla, tässä tapauksessa, kun väri muuttuu. Voisimme käyttää joko ylivuotoa tai helppoa tyhjentämismenetelmää, jos jokaisella väriryhmällä oli pääelementti. Tai käytämme tyhjän div-menetelmää kunkin ryhmän välillä. Kolme käärintädiviä, joita ei aiemmin ollut olemassa, tai kolme kääriä, joita ei aiemmin ollut. Annan sinun päättää, mikä on parempi.

Ongelmia kellukkeiden kanssa

Kellukkeet lyövät usein hauraudestaan. Suurin osa haavoittuvuudesta tuli IE6: n ja IE7: n virheistä. Kun nämä selaimet haalistuvat menneisyyteen, nämä virheet ovat hiipumassa niiden mukana. Mutta on silti syytä ymmärtää heitä, jos joudut joskus virheenkorjaamaan “OldIE”.

• Työntö alaspäin on oire siitä, että kelluvan kohteen sisällä oleva elementti on leveämpi kuin itse kelluke (tyypillisesti kuva). Suurin osa selaimista renderöi kuvan kellukkeen ulkopuolella, mutta se, että tarttuva osa ei vaikuta toiseen asetteluun. IE: n vanhat versiot laajensivat kelluketta sisällyttämään kuvan, mikä usein vaikutti rajusti asetteluun. Yleinen esimerkki on pääsisällöstä tarttuva kuva työntämällä sivupalkki alas.
  

  

  Pikakorjaus: Varmista, että sinulla ei ole kuvia, jotka tekisivät tämän. Käytä overflow: hidden;leikkaamaan ylimääräinen.

• Double Margin Bug - Toinen asia, joka on muistettava käsiteltäessä IE 6: ta, on se, että jos lisäät marginaalin samaan suuntaan kuin kellukkeet, se kaksinkertaistaa marginaalin. Pikakorjaus: aseta display: inlinekellukkeeseen ja älä huoli, että se pysyy lohkotason elementtinä.
• 3px Jog on, kun teksti, joka on seuraavaksi kellutettuun elementti salaperäisesti potkittiin pois 3px kuin outo voimakentän ympärillä kellua. Pikakorjaus: aseta leveys tai korkeus kyseiselle tekstille.
• IE 7: ssä Bottom Margin Bug oli silloin, kun jos kelluva vanhempi on kelluttanut lapsia sen sisällä, vanhempi jättää huomioimatta näiden lasten alamarginaalin. Pikakorjaus: käytä vanhemman pohjapehmustetta.

Vaihtoehdot

Jos tarvitset tekstiä käärittävän kuvien ympärille, floatille ei todellakaan ole vaihtoehtoja. Kun puhut siitä, tarkista tämä melko fiksu tekniikka tekstin käärimiseksi epäsäännöllisten muotojen ympärille. Mutta sivun asettelussa on ehdottomasti valintoja. Eric Solilla on artikkeli A List Apart, Faux Absolute Positioning, jossa kuvataan erittäin mielenkiintoinen tekniikka, joka monin tavoin yhdistää kellukoiden joustavuuden absoluuttisen paikannuksen vahvuuteen.

CSS3 käsittelee sivun asettelua muutamalla tavalla:

• Flexbox
• Usean sarakkeen asettelu
• Ruudukon asettelu

Keskusteltiin ehdottomasti sijoitetuista kellukkeista (esim. Asetat ehdottomasti normaalina, mutta elementti pystyy silti vaikuttamaan muihin elementteihin, kuten tekstin käärimiseen), mutta mielestäni ajatus hylättiin johtuen samankaltaisuudesta muihin vankempiin asetteluideoihin.

Video

Tein kuvaruudun jonkin aikaa sitten selittäen monia näistä float-käsitteistä.

Liittyvät

• clear
• position

Lisää tietoa

• float W3C-määrityksessä
• float osoitteessa MDN

Selaimen tuki

Kromi	Safari	Firefox	Ooppera	IE	Android	iOS
Kaikki	Kaikki	Kaikki	Kaikki	Kaikki	Kaikki	Kaikki