Plukdyti - CSS-gudrybės

Turinys

floatCSS nuosavybė naudojama pozicionavimo ir išdėstymo interneto svetainėse.

.module ( float: left; )

Vertybės

  • none: elementas neplaukia. Tai yra pradinė vertė.
  • left: plūduriuoja elementą kairėje jo talpyklos.
  • right: plūduriuoja elementą savo konteinerio dešinėje.
  • inherit: elementas paveldi savo tėvų plūduriavimo kryptį.
Pastaba: Plūduriuojantis elementas yra automatiškai display: block;

Ką reiškia plūdė?

Norėdami suprasti tikslą ir kilmę float, galime ieškoti spausdinimo dizaino. Naudojant spausdinimo maketą, vaizdai gali būti nustatyti puslapyje taip, kad prireikus juos apgaubtų tekstas. Tai paprastai ir tinkamai vadinama „teksto įvyniojimu“. Štai to pavyzdys.

Puslapių išdėstymo programose langeliams, kuriuose yra tekstas, gali būti nurodyta pagerbti teksto įvyniojimą arba jo nepaisyti. Nepaisydami teksto įvyniojimo, žodžiai galės tekėti tiesiai virš vaizdo, kaip jo net nebuvo. Tuo skiriasi tas vaizdas, kuris yra puslapio srauto dalis (ar ne). Interneto dizainas yra labai panašus.

Kuriant interneto dizainą, puslapio elementai su floatjiems pritaikyta CSS ypatybe yra tokie patys kaip vaizdai spausdinimo makete, kur aplink juos teka tekstas. Nuplaunami elementai lieka tinklalapio srauto dalimi. Tai aiškiai skiriasi nuo puslapio elementų, kuriuose naudojamas absoliutus padėties nustatymas. Visiškai išdėstyti puslapio elementai pašalinami iš tinklalapio srauto, pvz., Kai spausdinimo maketo teksto laukelyje buvo nurodyta ignoruoti puslapio įvyniojimą. Absoliučiai išdėstyti puslapio elementai neturės įtakos kitų elementų padėčiai, o kiti elementai jų neturės, nesvarbu, ar jie liečiasi, ar ne.

Demonstracija

Šioje demonstracijoje rodomas straipsnis su dviem vaizdais: vienas nustatytas į float: leftir vienas nustatytas į float: right. Paspauskite mygtuką „perjungti plūdes“, kad išjungtumėte ir įjungtumėte plūdes.

Žr. CSS-Tricks (@ css-tricks) „Pen Float“ pavyzdį „CodePen“.

Plūdės išdėstymui

Be paprasto teksto apvyniojimo vaizdais pavyzdžio, plūdurius galima naudoti kuriant ištisus žiniatinklio maketus .

Plūdės taip pat padeda išdėstyti mažesniais atvejais. Paimkime, pavyzdžiui, šią mažą tinklalapio sritį. Jei naudosime floatsavo avataro atvaizdą, pakeitus jo dydį, langelyje esantis tekstas vėl bus pritaikytas:

Tą patį išdėstymą galima pasiekti naudojant santykinį padėties nustatymą ant konteinerio ir absoliučią padėtį avatare. Bet kai tai bus padaryta, avataras nepaveiks teksto ir negalės atspindėti dydžio pakeitimo.

Demonstracija

Šioje demonstracijoje rodomas avataras su float: leftpritaikytu. Paspauskite mygtuką „perjungti vaizdo dydį“, kad pamatytumėte platesnę avataro atvaizdo versiją. Atkreipkite dėmesį, kad tekstas grįžta, kad tilptų vaizdą, o ne bėgtų per vaizdą.

Peržiūrėkite „CSS-Tricks“ („@ css-tricks“) „Pen Float“ demonstracinę versiją „CodePen“.

Išvalyti plūdę

Float sesers turtas yra clear. Elementas, turintis nustatytą clearsavybę, nejudės greta plūdės, kaip to nori plūdė, bet pats judės žemyn pro plūdę. Vėlgi iliustracija yra naudingesnė nei žodžiai:

Ankstesniame pavyzdyje šoninė juosta yra plūduriuojama į dešinę ir yra trumpesnė nei pagrindinė turinio sritis. Tada poraštė turi įšokti į tą laisvą vietą, kaip reikalauja plūdė. Norėdami išspręsti šią problemą, poraštę galima išvalyti, kad ji liktų po abiem plūduriuojančiais stulpeliais.

#footer ( clear: both; )

„Clear“ taip pat turi keturias galiojančias reikšmes. Vertė bothyra dažniausiai naudojamas, kuris išvalo plūdės mašinos iš bet kuria kryptimi. Reikšmės leftir rightgali būti naudojamos tik norint išvalyti plūdę iš vienos krypties. Pradinė vertė yra none, kuri paprastai nereikalinga, nebent ji naudojama aiškiai pašalinant nustatytą clearvertę. Vertė inheritpriverčia elementą paveldėti tėvų clearvertę. Keista, kad „Internet Explorer“ nepalaikė šios vertės iki IE8.

Išvalyti tik plūdę leftarba rightplūdę, nors tai mažiau pastebima laukinėje gamtoje, ji tikrai turi savo paskirtį.

Didysis žlugimas

Vienas iš nemaloniausių dalykų dirbant su plūdėmis yra tai, kaip jie gali paveikti elementą, kuriame yra jie (jų „pagrindinis“ elementas). Jei pagrindiniame elemente nėra nieko, išskyrus plaukiojančius elementus, jo aukštis sutampa. Tai ne visada akivaizdu, jei tėvai neturi vizualiai pastebimo fono, tačiau svarbu tai žinoti.

Kad ir koks prieštaringas gali atrodyti žlugimas, alternatyva yra blogesnė. Apsvarstykite šį scenarijų:

Jei viršuje esantis bloko elementas būtų automatiškai išsiplėtęs, kad tilptų plūduriuojantis elementas, teksto sraute tarp pastraipų atsirastų nenatūralus tarpų pertraukimas, be jokio praktiško jo taisymo būdo. Jei taip būtų, mes, dizaineriai, dėl tokio elgesio skųstumėmės daug sunkiau, nei dėl griūties.

Beveik visada reikia spręsti žlugimą, kad būtų išvengta keistų išdėstymų ir skirtingų naršyklių problemų. Mes ją sutvarkome išvalydami plūdę po plūduriuojančiais elementais konteineryje, bet prieš uždarant konteinerį.

Plūdų valymo technika

Jei esate tokioje situacijoje, kai visada žinote, kas bus sėkmingas elementas, galite pritaikyti šio clear: both;elemento vertę ir užsiimti savo verslu. Tai yra idealu, nes tam nereikia jokių įmantrių įsilaužimų ir jokių papildomų elementų, todėl tai idealiai prasminga. Žinoma, viskas paprastai nevyksta tokiu būdu, todėl įrankių rinkinyje turime turėti daugiau valymo įrankių.

  • Tuščio div metodas , tiesiogine prasme, yra tuščias div. . Kartais pamatysite naudojamą
    elementą ar kitą atsitiktinį elementą, tačiau „div“ yra labiausiai paplitęs, nes jis neturi numatytojo naršyklės stiliaus, neturi jokios specialios funkcijos ir vargu ar bus bendrai sukurtas naudojant CSS. Šį metodą niekina semantiniai puristai, nes jis neturi kontekstinės prasmės puslapiui ir yra skirtas tik pateikimui. Žinoma, griežčiausia prasme jie yra teisūs. Bet tai atlieka darbą ir niekam nepakenkia.
  • Perpildymo metodas priklauso nuo overflowCSS ypatybės nustatymo pagrindiniame elemente. Jei ši ypatybė nustatyta kaip pagrindinis elementas autoarba hiddenant jo, pagrindinis elementas išsiplės, kad jame būtų plūdės, veiksmingai išvalant jį vėlesniems elementams. Šis metodas gali būti gražiai semantiškas, nes tam gali nebūti reikalingi papildomi elementai. Tačiau, jei pastebite, kad pridedate naują divtik tam, kad tai pritaikytumėte, tai yra ne mažiau prasmingas kaip tuščias divmetodas ir mažiau pritaikomas. Taip pat nepamirškite, kad perpildymo savybė nėra specialiai skirta plūdėms valyti. Būkite atsargūs, neslėpkite turinio ir nesukelkite nepageidaujamų slinkties juostų.
  • Paprastas kliringo metodas (kitaip vadinamas „clearfix“) naudoja sumanų CSS pseudo selektorių ( :after), kad išvalytų plūdes. Užuot nustatę tėvų perpildymą, jūs pritaikote papildomą klasę, pvz., „Clearfix“. Tada pritaikykite šį CSS: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    Tai pritaikys nedidelį turinį, paslėptą nuo vaizdo, po pagrindinio elemento, kuris išvalys plūdę. Tai nėra visa istorija, nes norint naudoti senesnes naršykles, reikia naudoti papildomą kodą. Pastaba: taip pat žiūrėkite šį fragmentą, kuriame stebimi naujausi ir geriausi „clearfix“ pataisymai, įskaitant naujesnius „micro clearfix“.

Skirtingi scenarijai reikalauja skirtingų plūdės kliringo metodų. Paimkime, pavyzdžiui, skirtingų tipų blokų tinklelį.

Norėdami geriau vizualiai sujungti panašius blokus, norime pradėti naują eilutę, kaip mums patinka, šiuo atveju pasikeitus spalvai. Jei kiekvienoje iš spalvų grupių būtų pagrindinis elementas, galėtume naudoti perpildymo arba paprasto išvalymo metodą. Arba mes naudojame tuščio div metodą tarp kiekvienos grupės. Trys apvyniojimo divai, kurių anksčiau nebuvo, arba trys po divų, kurių anksčiau nebuvo. Aš leisiu jums nuspręsti, kas yra geriau.

Problemos su plūdėmis

Plūdės dažnai būna mušamos dėl to, kad yra trapios. Daugiausia šio pažeidžiamumo atsirado dėl IE6 ir IE7 klaidų. Kai šios naršyklės nyksta į praeitį, šios klaidos nyksta kartu su jomis. Bet vis tiek verta juos suprasti, jei kada nors reikės derinti „OldIE“.

  • Nuleidimas žemyn - tai simptomas, kai plūduriuojančio daikto viduje esantis elementas yra platesnis nei pati plūdė (paprastai vaizdas). Daugelis naršyklių atvaizduos vaizdą už plūdės ribų, tačiau išklijuota dalis neturės įtakos kitam išdėstymui. Senosios IE versijos išplėtė plūdurą, kad būtų vaizdas, dažnai smarkiai paveikiantis maketą. Dažnas pavyzdys yra vaizdas, išlindęs iš pagrindinio turinio, šoninę juostą nustumdamas žemyn.

    Greitas pataisymas: įsitikinkite, kad neturite jokių vaizdų, kurie tai padarytų, naudokite overflow: hidden;pertekliui sumažinti.

  • „Double Margin Bug“ - dar vienas dalykas, kurį reikia atsiminti dirbant su IE 6, yra tai, kad jei taikysite maržą ta pačia kryptimi kaip ir plūdė, tai padvigubins. Greitas pataisymas: nustatykite display: inlineant plūdės ir nesijaudinkite, kad tai liks bloko lygio elementas.
  • „ 3px Jog“ yra tai, kai tekstą, esantį šalia plūduriuojančio elemento, paslaptingai atmuša 3px kaip keistas jėgos laukas aplink plūdę. Greitas taisymas: nustatykite paveikto teksto plotį ar aukštį.
  • IE 7 programoje „ Apatinės maržos klaida“ buvo tada, kai, jei plūduriuojantys tėvai plūdo vaikus, tėvai nepaisė šių vaikų apatinės maržos. Greitas pataisymas: vietoj tėvų naudokite apatinį užpildą.

Alternatyvos

Jei jums reikia teksto apvynioti vaizdus, ​​plūduriuojant alternatyvų tikrai nėra. Kalbėdami apie tai, patikrinkite šią gana protingą techniką, kaip tekstą apvynioti netaisyklingomis formomis. Tačiau puslapio išdėstymui tikrai yra pasirinkimo galimybių. Ericas Solas turi straipsnį „A List Apart“, „Faux Absolute Positioning“, kuriame aprašoma labai įdomi technika, kuri daugeliu atžvilgių sujungia plūdžių lankstumą su absoliutaus padėties tvirtumu.

CSS3 sprendžia puslapio išdėstymą keliais būdais:

  • „Flexbox“
  • Kelių stulpelių išdėstymas
  • Tinklelio išdėstymas

Buvo aptartos absoliučiai išdėstytos plūdės (pvz., Jūs absoliučiai laikotės normaliai, bet elementas vis tiek gali paveikti kitus elementus, pvz., Apgaubkite tekstą), tačiau manau, kad idėja buvo atidėta dėl panašumų su kitomis tvirtesnėmis išdėstymo idėjomis.

Vaizdo įrašas

Kurį laiką dariau ekranizaciją ir paaiškinau daugelį šių plūduriuojančių sąvokų.

Susijęs

  • clear
  • position

Daugiau informacijos

  • float W3C specifikacijoje
  • float MDN

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Viskas Viskas Viskas Viskas Viskas Viskas Viskas

Įdomios straipsniai...