Ujuk - CSS-trikid

Anonim

floatVara CSS kasutatakse asukoha ja paigutuse veebilehti.

.module ( float: left; )

Väärtused

  • none: element ei hõlju. See on algväärtus.
  • left: hõljub elemendi mahutist vasakul.
  • right: hõljub elementi mahutist paremal.
  • inherit: element pärib oma vanema ujuki suuna.
Märkus. Ujuv element on automaatselt display: block;

Mida tähendab hõljumine?

Eesmärgi ja päritolu mõistmiseks floatvõime kujunduse printida. Prindipaigutuses võidakse pildid lehele sättida nii, et tekst ümbritseb neid vastavalt vajadusele. Seda nimetatakse tavaliselt ja asjakohaselt tekstimähiseks. Siin on näide sellest.

Lehekülgede paigutusprogrammides saab teksti hoidvatele kastidele öelda, et need austaksid teksti või ümbritseks seda. Tekstimähise ignoreerimine võimaldab sõnadel voolata otse pildi kohal, nagu seda poleks isegi olnud. See on vahe, kas see pilt on osa lehe voost (või mitte). Veebikujundus on väga sarnane.

Veebikujunduses on leheelemendid, millele on floatrakendatud CSS-i omadus, täpselt nagu pildid prindipaigutuses, kus tekst nende ümber voolab. Ujuvad elemendid jäävad osaks veebilehe voos. See erineb absoluutset positsioneerimist kasutavatest leheelementidest. Absoluutselt paigutatud lehe elemendid eemaldatakse veebilehe voost, näiteks siis, kui prindipaigutuse tekstikastil kästi lehe mähkimist eirata. Absoluutselt paigutatud leheelemendid ei mõjuta teiste elementide positsiooni ja muud elemendid ei mõjuta neid, olenemata sellest, kas need puudutavad üksteist või mitte.

Demo

See demo näitab artiklit, millel on kaks pilti: üks on seatud olekusse float: leftja teine ​​on seatud float: right. Ujukite väljalülitamiseks ja sisselülitamiseks vajutage nuppu “ujukite vahetamine”.

Vaadake CodePenil CSS-Tricksi (@ css-tricks) pliiatsi hõljuki näidet.

Ujukid paigutuse jaoks

Peale lihtsa näite teksti ümbritsemisest piltide ümber saab ujukeid kasutada tervete veebipaigutuste loomiseks .

Ujukid on abiks ka väiksematel juhtudel paigutamisel. Võtame näiteks selle väikese lehe ala. Kui kasutame floatoma avatari pilti, siis selle pildi suuruse muutmisel muutub kasti tekst selle mahutamiseks:

Sama paigutuse saab saavutada, kasutades suhtelist positsioneerimist konteineril ja absoluutset positsioneerimist ka avataris. Kuid kui see on nii tehtud, ei mõjutaks avatar teksti ja see ei suudaks suuruse muutust kajastada.

Demo

See demo näitab rakendusega float: leftrakendatud avatari . Avatari pildi laiema versiooni nägemiseks vajutage nuppu „Pildi suuruse vahetamine“. Pange tähele, et tekst peegeldub pildi mahutamiseks, selle asemel, et pilti üle joosta.

Vaadake CodePenil CSS-Tricksi (@ css-tricks) pliiatsi hõljumise demot.

Ujuki puhastamine

Floati õe vara on clear. Element, millel on määratud clearomadus, ei liigu ujuki kõrval nagu ujuk soovib, vaid liigub ise ujukist mööda. Jällegi on illustratsioonist rohkem abi kui sõnadest:

Ülaltoodud näites hõljub külgriba paremale ja on lühem kui peamine sisupiirkond. Seejärel peab jalus hüppama üles vabasse ruumi, nagu ujuk nõuab. Selle probleemi lahendamiseks saab jaluse kustutada, et see jääks mõlema hõljuva veeru alla.

#footer ( clear: both; )

Selgel on ka neli kehtivat väärtust. bothKõige sagedamini kasutatakse väärtust , mis puhastab mõlemast suunast tulevad ujukid. Väärtusi leftja rightsaab kasutada ujuki puhastamiseks ainult ühest suunast. Esialgne väärtus on none, mis on tavaliselt tarbetu, välja arvatud juhul, kui seda kasutatakse määratud clearväärtuse selgesõnaliseks eemaldamiseks . Väärtus inheritpaneb elemendi oma vanema clearväärtuse pärima . Kummalisel kombel ei toetanud Internet Explorer seda väärtust enne IE8.

Ainult ujuki leftvõi rightujuki puhastamine on looduses vähem levinud, kuid sellel on kindlasti kasutusalad.

Suur kokkuvarisemine

Üks uimastavatest asjadest ujukitega töötamise juures on see, kuidas need võivad mõjutada neid sisaldavat elementi (nende "vanem" elementi). Kui vanemelement sisaldab ainult ujuvaid elemente, variseb selle kõrgus tühjaks. See pole alati ilmne, kui vanem ei sisalda visuaalselt märgatavat tausta, kuid on oluline sellest teadlik olla.

Nii varjukindel kui kokkuvarisemine võib tunduda, on alternatiiv hullem. Mõelge sellele stsenaariumile:

Kui peal olev plokielement oleks hõlpsasti laienenud hõljuva elemendi mahutamiseks, oleks meil lõikudevahelises tekstivoogus ebaloomulik tühimurd, ilma et oleks praktilist võimalust seda parandada. Kui see nii oleks, kurdaksime meie, disainerid, selle käitumise üle palju tugevamalt kui kokkuvarisemise üle.

Kummalise paigutuse ja brauseriteüleste probleemide vältimiseks tuleb peaaegu alati tegeleda varinguga. Fikseerime selle, puhastades ujuki pärast mahutis asuvaid ujuvaid elemente, kuid enne konteineri sulgemist.

Ujukite puhastamise tehnikad

Kui olete olukorras, kus teate alati, mis saab edukaks elemendiks, saate clear: both;sellele elemendile väärtust rakendada ja oma asju ajada. See on ideaalne, kuna see ei nõua uhkeid häkkeid ega täiendavaid elemente, mis muudaksid selle täiesti semantiliseks. Muidugi asjad tavaliselt nii ei toimi ja meil peab olema tööriistakastis rohkem ujukitega puhastamise tööriistu.

  • Tühja div meetod on sõna otseses mõttes tühi div. . Mõnikord näete kasutatavat
    elementi või mõnda muud juhuslikku elementi, kuid div on kõige tavalisem, kuna sellel pole brauseri vaikestiili, sellel ei ole erifunktsiooni ja tõenäoliselt pole see üldjuhul CSS-iga kujundatud. Seda meetodit pilkavad semantilised puristid, kuna sellel pole lehele kontekstuaalset tähendust ja see on mõeldud ainult esitamiseks. Muidugi, kõige kitsamas mõttes on neil õigus. Kuid see saab töö tehtud ja ei tee kellelegi haiget.
  • Ülevoolumeetod põhineb overflowCSS-i atribuudi seadistamisel vanemelemendil. Kui selle atribuudi väärtuseks on seatud vanemelement autovõi selle hiddenpeal, laiendab vanem ujukeid, puhastades selle järgmiste elementide jaoks. See meetod võib olla kaunilt semantiline, kuna see ei pruugi vajada täiendavaid elemente. Kui aga avastate, et lisate divlihtsalt selle rakendamiseks uue , on see sama eba-semantiline kui tühi divmeetod ja vähem kohanemisvõimeline. Samuti pidage meeles, et ülevoolu vara pole mõeldud spetsiaalselt ujukite puhastamiseks. Ärge varjake sisu ega käivitage soovimatuid kerimisribasid.
  • Lihtne kustutusmeetod (muidu tuntud kui “clearfix”) kasutab :afterujukite puhastamiseks nutikat CSS-i pseudovalijat ( ). Selle asemel, et lapsevanemale ülevoolu seada, rakendate sellele lisaklassi, näiteks “clearfix”. Seejärel rakendage see CSS: 
    .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

    See rakendab pärast ujuki kustutavat vanemelementi väikest sisu, mis on vaate eest varjatud. See pole päris kogu lugu, kuna vanemate brauserite jaoks tuleb majutamiseks kasutada lisakoodi. Märkus. Vaadake ka seda koodilõiku, mis jälgib uusimaid ja paremaid selgitusi, sealhulgas uuemat „micro clearfixi”.

Erinevad stsenaariumid nõuavad erinevaid ujukklaasimismeetodeid. Võtame näiteks erinevat tüüpi plokkide ruudustiku.

Sarnaste plokkide paremaks visuaalseks ühendamiseks soovime alustada uut rida vastavalt soovile, antud juhul värvi muutumisel. Võiksime kasutada kas ülevoolu või lihtsat puhastamismeetodit, kui igal värvirühmal oleks vanemelement. Või kasutame tühja div-meetodit iga rühma vahel. Kolm pakkimisdivi, mida varem ei olnud, või kolm pärast, mida varem polnud. Ma lasen teil otsustada, kumb on parem.

Ujukitega seotud probleemid

Ujukid saavad sageli habras oleku tõttu peksa. Suurem osa sellest nõrkusest tulid IE6 ja IE7 vigadest. Kui need brauserid minevikku tuhmuvad, hääbuvad need vead koos nendega. Kuid ikkagi tasub neist aru saada, kui teil on kunagi vaja OldIE-d siluda.

  • Allakäik on sümptom ujuva elemendi sees olevast elemendist, mis on ujukist endast laiem (tavaliselt pilt). Enamik brausereid renderdab pilti väljaspool ujukit, kuid mitte see, et kleepuv osa muud kujundust mõjutaks. IE vanad versioonid laiendasid ujukit, et see sisaldaks pilti, mõjutades sageli drastiliselt paigutust. Levinud näide on põhisisu seest välja kleepuv pilt lükates külgriba allapoole.

    Kiirparandus: veenduge, et teil poleks ühtegi pilti, mis seda teeks. Kasutage overflow: hidden;liigse osa lõikamiseks.

  • Topeltmarginaali viga - IE 6-ga tegelemisel tuleb veel meeles pidada, et kui rakendate varu ujukiga samas suunas, kahekordistab see varu. Kiirparandus: seadke display: inlineujukile ja ärge muretsege, et see jääb plokitaseme elemendiks.
  • 3PX Jog on, kui teksti, mis on üles kõrval paisati element on müstiliselt visati ära 3PX nagu imelik jõuvälja ümber sularahaga. Kiirparandus: määrake mõjutatud tekstile laius või kõrgus.
  • IE 7-s oli Bottom Margin Bug see, et kui ujuv vanem on selles lapsi hõljunud, ignoreerib vanem nende laste alumist varu. Kiire lahendus: selle asemel kasutatakse vanemal alumist polsterdust.

Alternatiivid

Kui vajate piltide ümber teksti mähkimist, pole ujukil tegelikult alternatiive. Sellest rääkides vaadake seda üsna nutikat tehnikat teksti mähkimiseks ebakorrapäraste kujundite ümber. Kuid lehe paigutuse osas on kindlasti valikuid. Eric Solil on artikkel A List Apart, Faux Absolute Positioning, mis kirjeldab väga huvitavat tehnikat, mis ühendab mitmes mõttes ujukite paindlikkuse absoluutse positsioneerimise tugevusega.

CSS3 tegeleb lehe paigutusega mitmel viisil:

  • Flexbox
  • Mitme veeruga paigutus
  • Võrgu paigutus

Arutati absoluutselt positsioneeritud ujukeid (nt positsioneerite absoluutselt tavalisena, kuid element suudab siiski mõjutada teisi elemente, näiteks laske sellel teksti ümbritseda), kuid ma arvan, et idee oli riiulil sarnasuste tõttu teiste tugevamate paigutusideedega.

Video

Tegin mõnda aega tagasi ekraanikuva, selgitades paljusid neist hõljukimõistetest.

Seotud

  • clear
  • position

Rohkem informatsiooni

  • float W3C spetsifikatsioonis
  • float juures MDN

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Kõik Kõik Kõik Kõik Kõik Kõik Kõik