floatNekretnina u CSS se koristi za pozicioniranje i raspored na web stranicama.
.module ( float: left; )Vrijednosti
none: element ne pluta. To je početna vrijednost.left: pluta element s lijeve strane spremnika.right: pluta element desno od njegovog spremnika.inherit: element nasljeđuje plutajući smjer svog roditelja.
display: block;
Što znači plovak?
Da bismo razumjeli svrhu i podrijetlo float, možemo potražiti dizajn tiska. U rasporedu ispisa, slike se mogu postaviti na stranicu tako da se tekst omota po potrebi. To se obično i prikladno naziva "premotavanje teksta". Evo primjera za to.
U programima za raspored stranica, okvirima u kojima se nalazi tekst može se reći da poštuju prelom teksta ili da ga zanemaruju. Zanemarivanje premotavanja teksta omogućit će riječima da prelaze pravo preko slike kao da je nije ni bilo. To je razlika između te slike koja je dio toka stranice (ili ne). Web dizajn je vrlo sličan.
U web dizajnu, elementi stranice s CSS floatsvojstvom primijenjenim na njih slični su slikama u rasporedu ispisa gdje ih tekst struji. Plutajući elementi ostaju dio toka web stranice. Ovo se značajno razlikuje od elemenata stranice koji koriste apsolutno pozicioniranje. Apsolutno pozicionirani elementi stranice uklanjaju se iz tijeka web stranice, na primjer kada je tekstnom okviru u rasporedu ispisa rečeno da zanemaruje premoštavanje stranice. Apsolutno pozicionirani elementi stranice neće utjecati na položaj ostalih elemenata, a ostali elementi neće utjecati na njih, bez obzira dodiruju li se ili ne.
Demo
Ova demonstracija prikazuje članak s dvije slike: jednom postavljenom na float: lefti jednom postavljenom na float: right. Pritisnite gumb "uključi / isključi plove" da biste isključili i uključili plovke.
Pogledajte Primjer plovka olovke od CSS-Tricks (@ css-tricks) na CodePenu.
Lebdi za izgled
Osim jednostavnog primjera omatanja teksta oko slika, plutajući se podaci mogu koristiti za izradu cijelih web izgleda .
Floats su također korisni za raspored u manjim primjerima. Uzmimo za primjer ovo malo područje web stranice. Ako koristimo floatza svoju avatar sliku, kad ta slika promijeni veličinu, tekst u okviru će se preoblikovati kako bi je prilagodio:
Isti se raspored mogao postići korištenjem relativnog pozicioniranja na spremniku i apsolutnog pozicioniranja na avataru. Ali, kad se to učini na taj način, avatar neće utjecati na tekst i neće se moći preoblikovati pri promjeni veličine.
Demo
Ova demonstracija prikazuje avatar s float: leftprimijenjenim. Pritisnite gumb "prebaci veličinu slike" da biste vidjeli širu verziju slike avatara. Primijetite da se tekst ponovo prilagođava slici, umjesto da je pregazi.
Pogledajte demonstraciju Pen Float o CSS-Tricks (@ css-tricks) na CodePenu.
Čišćenje plovka
Floatovo sestrinsko vlasništvo je clear. Element na kojem je postavljeno clearsvojstvo neće se pomaknuti uz plutajuću zonu kao što plovak želi, već će se sam pomaknuti prema plutajućem položaju. I opet je ilustracija korisnija od riječi:
U gornjem primjeru bočna traka pluta udesno i kraća je od glavnog područja sadržaja. Podnožje je tada potrebno za skok u onaj raspoloživi prostor koji zahtijeva plovak. Da bi riješio taj problem, podnožje se može očistiti kako bi se osiguralo da ostane ispod oba plutajuća stupca.
#footer ( clear: both; )Clear ima i četiri valjane vrijednosti. Vrijednost bothse najčešće koristi, što uklanja plutajuće podatke iz bilo kojeg smjera. Vrijednosti lefti rightmogu se koristiti za oslobađanje plovka samo iz jednog smjera. Početna vrijednost je none, što je obično nepotrebno, osim ako se koristi za izričito uklanjanje postavljene clearvrijednosti. Vrijednost inheritčini da element naslijedi clearvrijednost roditelja . Čudno, Internet Explorer nije podržavao ovu vrijednost do IE8.
Čišćenje samo leftili rightfloat, iako se rjeđe viđa u divljini, definitivno ima koristi.
Veliki kolaps
Jedna od zbunjujućih stvari u radu s plovcima je kako oni mogu utjecati na element koji ih sadrži (njihov „roditeljski“ element). Ako nadređeni element ne sadrži ništa osim plutajućih elemenata, njegova visina se sruši na ništa. To nije uvijek očito ako roditelj ne sadrži vizualno uočljivu pozadinu, ali važno je toga biti svjestan.
Koliko god se urušavanje činilo kontraintuitivnim, alternativa je gora. Razmotrite ovaj scenarij:
Da se blok element na vrhu automatski proširio kako bi prihvatio plutajući element, imali bismo neprirodan razmak u protoku teksta između odlomaka, bez praktičnog načina popravljanja. Da je to slučaj, mi dizajneri puno bismo se više žalili na ovo ponašanje nego na urušavanje.
Sa skupljanjem gotovo uvijek treba riješiti problem kako biste spriječili neobičan izgled i probleme s više preglednika. Popravljamo ga uklanjanjem plovka nakon plutajućih elemenata u spremniku, ali prije zatvaranja spremnika.
Tehnike za uklanjanje plovaka
Ako ste u situaciji da uvijek znate kakav će biti sljedeći element, možete primijeniti clear: both;vrijednost na taj element i krenuti u posao. Ovo je idealno jer ne zahtijeva otmjene hakere i nikakve dodatne elemente što ga čini savršeno semantičkim. Naravno, stvari obično ne funkcioniraju na taj način i u našem alatu moramo imati više alata za čišćenje plutajućih sredstava.
- Metoda praznog dijeljenja je, doslovno, prazan div.
- Metoda preljeva oslanja se na postavljanje
overflowsvojstva CSS na nadređeni element. Ako je ovo svojstvo postavljeno naautoilihiddenna nadređeni element, nadređeni će se proširiti tako da sadrži plutajuće podatke, učinkovito uklanjajući ga za sljedeće elemente. Ova metoda može biti lijepo semantička jer možda neće trebati dodatne elemente. Međutim, ako vam se dogodi da dodate novudivsamo da biste to primijenili, jednako je nesemantična kao i praznadivmetoda, a manje prilagodljiva. Također imajte na umu da svojstvo preljeva nije posebno za čišćenje plovka. Pazite da ne sakrijete sadržaj ili ne pokrenete neželjene klizače. - Jednostavna metoda čišćenja (inače poznata kao "clearfix") koristi pametni CSS pseudo selektor (
:after) za uklanjanje plutajućih podataka. Umjesto postavljanja preljeva na roditelja, na njega primjenjujete dodatnu klasu poput "clearfix". Zatim primijenite ovaj CSS:.clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )Ovo će primijeniti mali dio sadržaja, skriven od pogleda, nakon nadređenog elementa koji uklanja plutajuće podatke. To nije sasvim cijela priča, jer se za smještaj starijih preglednika treba koristiti dodatni kôd. Napomena: Pogledajte i ovaj isječak koji prati najnovije i najbolje u clearfix-ovima, uključujući noviji "micro clearfix".
Različiti scenariji zahtijevaju različite metode čišćenja plovka. Uzmimo za primjer mrežu blokova, svaki od različitih vrsta.
Da bismo bolje vizualno povezali slične blokove, želimo započeti novi red kako želimo, u ovom slučaju kada se boja promijeni. Mogli bismo upotrijebiti ili metodu prelijevanja ili jednostavno čišćenje ako svaka od grupa boja ima nadređeni element. Ili koristimo praznu div metodu između svake grupe. Tri div-ova omatanja koji prije nisu postojali ili tri nakon div-ova koji prije nisu postojali. Dopustit ću vam da odlučite što je bolje.
Problemi s plovcima
Plutači se često dobivaju zbog krhkosti. Većina ove osjetljivosti dolazi od bugova u IE6 i IE7. Kako ti preglednici odmiču u prošlost, ti bugovi nestaju zajedno s njima. Ali, ipak ih vrijedi razumjeti ako ikada budete trebali ispraviti "OldIE".
- Pritisak je simptom da je element unutar plutajućeg predmeta širi od samog plovka (obično slika). Većina preglednika prikazat će sliku izvan plutajućeg sloja, ali dio koji viri neće utjecati na drugi izgled. Stare verzije IE proširile su float tako da sadrže sliku, često drastično utječući na izgled. Uobičajeni primjer je slika koja viri iz glavnog sadržaja i pomakne bočnu traku dolje.
Brzo rješenje: Pazite da nemate slika koje to čine, upotrijebite
overflow: hidden;za odsijecanje viška. - Dvostruka margina - Još jedna stvar koju trebate imati na umu kada se radi s IE 6 jest da ako primijenite marginu u istom smjeru kao i float, ona će udvostručiti marginu. Brzo rješenje: postavite
display: inlinena plovak i ne brinite da će i dalje ostati element na razini bloka. - Trčanje od 3 piksela je kada tekst koji se nalazi pored plutajućeg elementa tajanstveno odbaci 3 piksela poput čudnog polja sile oko plovka. Brzi popravak: postavite širinu ili visinu pogođenog teksta.
- U IE 7, greška donje margine bila je kada roditelj ignorira donju marginu te djece ako plutajući roditelj pluta djecu unutar nje. Brzi popravak: umjesto toga upotrijebite donju oblogu na roditelju.
Alternative
Ako vam je potrebno zamatanje teksta oko slika, za float zaista ne postoje alternative. Kad smo već kod toga, pogledajte ovu prilično pametnu tehniku omatanja teksta oko nepravilnih oblika. Ali za izgled stranice definitivno postoje izbori. Eric Sol ima članak o A List Apart, Faux Absolute Positioning, koji opisuje vrlo zanimljivu tehniku koja na mnogo načina kombinira fleksibilnost plovaka sa snagom apsolutnog pozicioniranja.
CSS3 rješava izgled stranice na nekoliko načina:
- Flexbox
- Izgled u više stupaca
- Raspored mreže
Raspravljalo se o apsolutno pozicioniranim plovcima (npr. Apsolutno se pozicionirate kao normalno, ali element i dalje može utjecati na druge elemente, poput umotavanja teksta oko njega), ali mislim da je ideja bila odložena zbog sličnosti s drugim robusnijim idejama izgleda.
Video
Napravio sam screencast neko vrijeme unatrag objašnjavajući mnoge od ovih plutajućih koncepata.
Povezano
clearposition
Više informacija
floatu specifikaciji W3Cfloatna MDN
Podrška preglednika
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| svi | svi | svi | svi | svi | svi | svi |