floatHotel v CSS se uporablja za pozicioniranje in postavitev na spletnih straneh.
.module ( float: left; )Vrednote
none: element ne plava. To je začetna vrednost.left: plava element levo od vsebnika.right: plava element desno od vsebnika.inherit: element podeduje plavajočo smer svojega nadrejenega.
display: block;
Kaj pomeni plovec?
Da bi razumeli namen in izvor float, si lahko ogledamo tisk. Pri postavitvi tiskanja lahko slike na stran nastavijo tako, da se besedilo po potrebi ovije okoli njih. Temu pogosto in primerno rečemo »previjanje besedila«. Tu je primer tega.
V programih za postavitev strani lahko v poljih, v katerih je besedilo, sporočite, da spoštujejo besedilni prelom ali da ga ignorirajo. Če prezrete zavijanje besedila, bodo besede tekle naravnost po sliki, kot da je sploh ni bilo. To je razlika med sliko, ki je del toka strani (ali ne). Spletno oblikovanje je zelo podobno.
Pri spletnem oblikovanju so elementi strani z floatlastnostjo CSS, ki so zanje uporabljeni, podobni slikam v postavitvi tiskanja, kjer besedilo teče okoli njih. Plavajoči elementi ostajajo del toka spletne strani. To se bistveno razlikuje od elementov strani, ki uporabljajo absolutno pozicioniranje. Absolutno postavljeni elementi strani se odstranijo iz toka spletne strani, na primer takrat, ko je bilo besedilnemu polju v postavitvi tiskanja naročeno, naj prezre zavijanje strani. Absolutno postavljeni elementi strani ne bodo vplivali na položaj drugih elementov, drugi elementi pa ne bodo vplivali nanje, ne glede na to, ali se dotikajo ali ne.
Demo
Ta predstavitev prikazuje članek z dvema slikama: eno nastavljeno na float: leftin eno nastavljeno na float: right. Pritisnite gumb »preklop plovcev«, da izklopite in vklopite plovce.
Oglejte si primer Pen Float s strani CSS-Tricks (@ css-tricks) na CodePen.
Lebdi za postavitev
Poleg preprostega primera ovijanja besedila okoli slik lahko plavajoče uporabite za ustvarjanje celotnih spletnih postavitev .
Plavajoči so koristni tudi za postavitev v manjših primerih. Vzemimo za primer to majhno področje spletne strani. Če floatza sliko avatarja uporabimo, se bo besedilo v polju spremenilo, ko bo spremenila velikost slike:
To isto postavitev je mogoče doseči z uporabo relativnega pozicioniranja na vsebniku in absolutnega pozicioniranja tudi na avatarju. Ko pa se to naredi na tak način, avatar ne bo vplival na besedilo in ne bo mogel spremeniti velikosti pri spremembi velikosti.
Demo
Ta predstavitev prikazuje avatar z float: leftuveljavljenim. Pritisnite gumb »preklopi velikost slike«, da si ogledate širšo različico slike avatarja. Upoštevajte, da se besedilo znova prilagodi sliki, namesto da bi jo prečkalo.
Oglejte si predstavitev Pen Float s strani CSS-Tricks (@ css-tricks) na CodePen.
Čiščenje plovca
Floatova sestrska lastnina je clear. Element, ki ima clearnastavljeno lastnost, se ne bo premaknil navzgor ob plovec, kot to plovec želi, temveč se bo pomaknil navzdol mimo plovca. Ponovno je ilustracija bolj koristna kot besede:
V zgornjem primeru je stranska vrstica plavajoča v desno in je krajša od glavnega področja vsebine. Noga mora nato skočiti v tisti razpoložljivi prostor, kot zahteva plovec. Če želite odpraviti to težavo, lahko nogo počistite, da zagotovite, da ostane pod obema plavajočima stolpcema.
#footer ( clear: both; )Clear ima tudi štiri veljavne vrednosti. Vrednost bothje najpogosteje uporabljena, kar odstrani plavajoče, ki prihajajo iz katere koli smeri. Vrednosti leftin rightse lahko uporabljajo za čiščenje lebdenja le iz ene smeri. Začetna vrednost je none, kar je običajno nepotrebno, razen če se uporablja za izrecno odstranitev clearnastavljene vrednosti. Zaradi vrednosti inheritelement podeduje clearvrednost nadrejenega elementa . Nenavadno je, da Internet Explorer te vrednosti ni podpiral do IE8.
Čiščenje samo float leftali rightfloat, čeprav ga v naravi redkeje opazimo, vsekakor koristi.
Veliki kolaps
Ena bolj zmede pri delu s plovci je, kako lahko vplivajo na element, ki jih vsebuje (njihov "nadrejeni" element). Če nadrejeni element ne vsebuje ničesar razen plavajočih elementov, se njegova višina strne v nič. To ni vedno očitno, če starš ne vsebuje nobenega vizualno opaznega ozadja, vendar je pomembno, da se tega zavedate.
Ne glede na to, kako propadljivo je propad, je alternativa še slabša. Upoštevajte ta scenarij:
Če bi se blokovni element na vrhu samodejno razširil, da bi sprejel plavajoči element, bi pri pretoku besedila med odstavki prišlo do nenaravnega presledka brez praktičnega načina popravljanja. Če bi bilo temu tako, bi se oblikovalci zaradi tega vedenja veliko bolj pritoževali kot nad sesuvanjem.
Skoraj vedno je treba rešiti kolaps, da preprečimo nenavadno postavitev in težave med brskalniki. Mi popraviti tako, da počistite plovec , ko so v zraku elementov v posodi, vendar pred zaključkom posode.
Tehnike odstranjevanja plovcev
Če ste v situaciji, ko vedno veste, kakšen bo naslednji element, lahko clear: both;za ta element uporabite vrednost in se lotite svojega posla. To je idealno, saj ne zahteva nobenih modnih vdorov in nobenih dodatnih elementov, zaradi česar je popolnoma semantičen. Seveda se stvari običajno ne obnesejo tako, zato moramo imeti v orodjarni več orodij za čiščenje plovca.
- Metoda praznega razdeljevanja je dobesedno prazen div.
- Metoda prelivanja temelji na nastavitvi
overflowlastnosti CSS na nadrejenem elementu. Če je ta lastnost nastavljena naautoalihiddenna nadrejenem elementu, se bo nadrejeni razširil, da bo vseboval plavajoče elemente, kar ga bo učinkovito očistilo za naslednje elemente. Ta metoda je lahko čudovito pomenska, saj morda ne bo zahtevala dodatnih elementov. Če pa dodate novodivsamo zato, da to uporabite, je enako nesemantična kot praznadivmetoda in manj prilagodljiva. Upoštevajte tudi, da lastnost overflow ni posebej namenjena čiščenju floatov. Pazite, da ne skrijete vsebine ali sprožite neželenih drsnikov. - Metoda enostavnega čiščenja (sicer znana kot »clearfix«) uporablja pameten psevdoizbirnik CSS (
:after) za čiščenje lebdenja. Namesto da nastavite preliv nadrejenega, zanj uporabite dodaten razred, kot je »clearfix«. Nato uporabite ta CSS:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )To bo uporabilo majhen košček vsebine, skrite očem, po nadrejenem elementu, ki počisti plovec. To ni povsem celotna zgodba, saj je za namestitev starejših brskalnikov treba uporabiti dodatno kodo. Opomba: Oglejte si tudi ta delček, ki beleži najnovejše in najboljše v čistih popravkih, vključno z novejšim »mikro clearfix«.
Različni scenariji zahtevajo različne metode čiščenja float. Vzemimo na primer mrežo blokov, vsake od različnih vrst.
Za boljšo vizualno povezavo podobnih blokov želimo začeti novo vrstico, kot želimo, v tem primeru, ko se spremeni barva. Če bi imela vsaka od barvnih skupin nadrejeni element, bi lahko uporabili metodo prelivanja ali enostavno čiščenje. Ali pa med vsako skupino uporabimo prazno metodo div. Trije zavijalni divji elementi, ki prej niso obstajali, ali trije za divji, ki prej niso obstajali. Dovolil vam bom, da se odločite, kaj je boljše.
Težave s plovci
Plovec je pogosto premagan, ker je krhek. Večina te občutljivosti je nastala zaradi napak v IE6 in IE7. Ko ti brskalniki odhajajo v preteklost, te napake izginjajo skupaj z njimi. Vendar jih je še vedno vredno razumeti, če boste kdaj morali odpraviti napako v "OldIE".
- Pomik je simptom, da je element znotraj plavajočega predmeta širši od samega plovca (običajno slika). Večina brskalnikov bo sliko upodobila zunaj lebdenja, vendar del, ki štrli, ne bo vplival na drugo postavitev. Stare različice IE so plovec razširile tako, da so vsebovale sliko, kar je drastično vplivalo na postavitev. Pogost primer je slika, ki štrli iz glavne vsebine, potisnite stransko vrstico spodaj.
Hitra rešitev: Prepričajte se, da nimate slik, ki bi to storile, s
overflow: hidden;čimer odrežete odvečno količino. - Double Margin Bug - Še ena stvar, ki si jo je treba zapomniti pri obravnavanju IE 6, je, da če uporabite rob v isti smeri kot float, bo rob podvojil. Hitra rešitev: nastavite jo
display: inlinena plovec in ne skrbite, da bo ostal element na ravni bloka. - 3PX Jog je, ko je besedilo, ki je pripravljen poleg zraku element skrivnostno vrgli proč 3PX kot čudno forcefield okoli plovcem. Hitra rešitev: nastavite širino ali višino prizadetega besedila.
- V IE 7 je bila napaka spodnjega roba, če je plavajoči starš v njej plaval otroke, spodnji rob teh otrok starš prezre. Hitra rešitev: namesto tega uporabite spodnjo oblogo na nadrejenem.
Alternative
Če potrebujete zavijanje besedila okoli slik, za float res ni druge možnosti. Ko smo že pri tem, si oglejte to precej pametno tehniko ovijanja besedila okoli nepravilnih oblik. Toda za postavitev strani zagotovo obstajajo izbire. Eric Sol ima članek o A List Apart, Faux Absolute Positioning, ki opisuje zelo zanimivo tehniko, ki v mnogih pogledih združuje prožnost plovcev z močjo absolutnega pozicioniranja.
CSS3 se postavitve strani loteva na nekaj načinov:
- Flexbox
- Postavitev v več stolpcih
- Postavitev mreže
Razpravljalo se je o absolutno postavljenih plovcih (npr. Popolnoma se postavite kot običajno, vendar element še vedno lahko vpliva na druge elemente, na primer, da se besedilo zavije okoli njega), vendar mislim, da je bila ideja zaradi podobnosti z drugimi bolj robustnimi idejami za postavitev odložena.
Video
Nekaj časa nazaj sem naredil screencast, v katerem sem razložil številne te koncepte float-a.
Sorodno
clearposition
Več informacij
floatv specifikaciji W3Cfloatna MDN
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Vse | Vse | Vse | Vse | Vse | Vse | Vse |