IN moderan web dizajn imovine float koristi se skoro na svakom koraku. Ali unatoč ovoj rasprostranjenosti, ne razumiju svi mehanizam plutajućih blokova, njihovo ponašanje i posljedice koje njihova upotreba može imati.
Šta je "float"?
Float Ovo je CSS svojstvo pozicioniranja. Da biste razumjeli njegovu suštinu i porijeklo, morate obratiti pažnju na štampani dizajn. U štampanim rasporedima, slika se može postaviti tako da tekst teče oko nje. Ovo se obično zove " prelamanje teksta".
U izgledu stranice može se odrediti blok koji sadrži tekst premotavanje teksta oko slike ili zanemarite omotavanje. Zanemarivanje prelamanja teksta omogućit će da riječi teku preko slike kao da je nema. Ovo čini razliku da li je slika dio toka na stranici ili ne. U web dizajnu je sve vrlo slično.
U web dizajnu, element sa CSS svojstvom primijenjenim na njega float ponašat će se kao slika s premotavanjem teksta oko nje u odštampanom rasporedu. Plutajući elementi ostaju dio toka web stranice. Ovo uopće nije isto što i elementi sa apsolutno pozicioniranje, koji su uklonjeni iz toka, kao da je u štampanom rasporedu bloku teksta rečeno da ignoriše prelamanje slika. Apsolutno pozicionirani elementi ne utiču na postavljanje drugih elemenata, a ostali elementi ne utiču na njihov položaj.
Postavljanje svojstva float za elemente sa koristeći CSS kao što slijedi:
#sidebar (float: desno; )
Ima ih četiri prihvatljive vrijednosti za imovinu float - lijevo, u pravu, nijedan, nasljediti. Prva dva lijevo I u pravu označavaju smjer lokacije - lijevo i desno. Nema- zadana vrijednost, označava da element nije plutajući i nasljediti instrukcije elementu da naslijedi vrijednost svojstva float od roditeljskog elementa.
Za šta se koristi float?
Osim toga jednostavan primjer premotavanje teksta oko slike, float može se koristiti za kreiranje web izgleda.
Float, također je pogodan za korištenje za male elemente rasporeda. Na primjer, uzmimo ovaj mali fragment web stranice. Ako postavimo svojstvo float Za malu sliku avatara, kada se veličina slike promijeni, omot će se promijeniti u skladu s novim dimenzijama slike:
Isti raspored se može implementirati korištenjem relativnog pozicioniranja kontejnera i apsolutnog pozicioniranja avatara i teksta unutar njega. Ali u rasporedu implementiranom prema ovoj shemi, promjena veličine slike neće utjecati na tekstualni blok, jer elementi s apsolutnim pozicioniranjem ne utječu na druge elemente, a drugi elementi ne utječu na njih.
Resetovanje omota
Jasno povezana imovina sa imovinom float. Element sa set property jasno neće se kretati prema gore oko elementa sa postavljenim svojstvom float, ali će se kretati prema dolje zanemarujući tok. I opet, ilustracija koja će sve objasniti bez daljnjeg.
U gornjem primjeru, bočna traka lebdi desno od glavnog bloka sadržaja. "Podrum" se preselio u slobodno mjesto ispod bočne trake, teče oko bloka s glavnim sadržajem. Da biste riješili ovaj problem, morate navesti vrijednost za svojstvo clear:both podnožja kako biste "očistili" tok oko oba stupca.
#footer (jasno: oba; ) 
Nekretnina jasno ima četiri značenja. Oba koristi se za ublažavanje protoka u oba smjera. lijevo I U redu se koriste za poništavanje jednog smjera - lijevo ili desno, respektivno. Nema- zadana vrijednost. Nasljediti mogla bi biti peta vrijednost, ali iznenađujuće nije podržana Internet Explorer . Resetiranje samo lijevog ili desnog toka je prilično rijetko, ali ima praktične prednosti.
Great Collapse
Jedna stvar u vezi sa radom float Ono što je zbunjujuće je efekat ovog svojstva na roditeljske elemente. Ako roditeljski element ne sadrži elemente osim float-a, tada se njegova visina doslovno smanjuje. Ovo nije uvijek primjetno, posebno ako roditeljski element nema istaknutu pozadinu, ali je važno imati na umu.
Ali alternativa takvom kolapsu je još gora. Razmotrite sljedeći scenario:
Ako se gornji blok automatski proširi kako bi primio plutajući element, završit ćemo s prazninom u toku teksta između pasusa, bez načina da to popravimo. Da je to slučaj, programeri bi se mnogo češće žalili na ovakvo ponašanje plutajućih blokova nego sada zbog kolapsa.
Uvijek je potrebno zapamtiti kolaps kako bi se spriječilo čudno ponašanje problemi sa izgledom i više pretraživača. Ovaj problem možemo riješiti korištenjem jasno nakon plutajućeg elementa u kontejneru, ali prije nego što se kontejner zatvori.
Tehnike otkazivanja omota
Ako ste u situaciji u kojoj znate gdje će biti sljedeći element, možete koristiti clear:oba i idite svojim poslom. Ovo savršena opcija, jer ne zahtijeva nikakve hakove ili dodatne elemente. Ali nažalost, obično ne ide sve onako kako želimo, i u ovom slučaju možete koristiti sljedeće alate.
Metoda praznog bloka.
To je bukvalno prazan blok.
. Ponekad možete pronaći element
ili bilo koji drugi nasumični element, ali div je najčešći jer nema zadani stil u pretraživačima, nema posebna funkcija a malo je vjerovatno da će biti općenito CSS stil. Ovu metodu semantički puristi odbijaju jer njeno prisustvo nema kontekstualno značenje na stranici i postoji samo za izgled. Naravno, u strogom smislu su u pravu, ali on radi svoj posao i nikome ne nanosi štetu.
Prelivna metoda.
Zasnovano na specificiranju CSS svojstava overflow za roditeljski element. Ako je ovo svojstvo postavljeno na auto ili skriveno za roditeljski element, on će se proširiti nakon plutajućeg elementa, efektivno resetujući njegovo omotavanje za naredne elemente. Ova metoda može biti semantički lijepa, jer ne zahtijeva dodatne elemente. Međutim, kao što vidite dodali smo novi div koristiti ovu metodu, koja je ekvivalentna korištenju nesemantičkog praznog bloka i manje je fleksibilna. Također treba imati na umu da je nekretnina overflow nije namijenjen za onemogućavanje premotavanja. Pazite da slučajno ne sakrijete sadržaj ili ne izazovete neželjene trake za pomicanje.
Jednostavan način čišćenja.
Koristi CSS pseudo-selektor (:after) za uklanjanje omotača. Umjesto korištenja imovine overflow za roditeljski skup elemenata dodatna klasa za to, na primjer "clearfix" i koristite sljedeći CSS stil:
Clearfix:after (sadržaj: "."; vidljivost: skrivena; prikaz: blok; visina: 0; jasno: oba; )
Ovo koristi mali dio sadržaja skriven od pogleda, koji se nalazi iza nadređenog elementa, koji resetuje omot. Ova metoda nije potpuna, jer je potrebno poboljšati kako bi podržala starije pretraživače.
Različite situacije zahtijevaju različite metode resetovanje protoka. Uzmimo kao primjer mrežu različitih tipova blokova.
Da bismo bolje vizualno kombinirali slične blokove, trebali bismo započeti novu liniju kada se boja promijeni. Možemo koristiti metod prelivanja ili rasvjetljavanja ako svaka grupa boja ima roditeljski element. Ili koristimo metod praznog bloka između grupa. Tri roditeljska bloka koja prethodno nisu postojala ili tri prazna bloka koja ranije nisu postojala. Na vama je da odlučite koja je metoda bolja.
Problemi sa plutajućim elementima
Plutajući elementi su često kritizirani zbog svoje krhkosti. Veliki dio ove krhkosti dolazi od IE6 i njegovih float orijentisane greške. Ali kako sve više programera odbija podršku za IE6, možda nećete razmišljati o tome, ali za one kojima je stalo do kompatibilnosti, evo kratke liste.
Gurnuti dole, je simptom da je element unutar plutajućeg bloka širi od tog bloka (ovo se obično dešava sa slikama). Većina pretraživača će prikazati lebdeći element koji strši, ali to neće imati utjecaja na izgled. IE će proširiti plutajući blok i često to ima drastičan učinak na izgled. Tipičan primjer je slika koja strši iz bloka s glavnim sadržajem, istiskujući se bočna traka dolje.
Brza odluka Problemi: koristite overflow: skriveno; da odrežete višak.
Dvostruka margina greška- još jedna stvar koju treba zapamtiti kada radite sa IE6. Ova greška se izražava u činjenici da ako je polje na istoj strani na kojoj je orijentisano float, polje je udvostručeno. Na primjer:
Ubacićemo levo polje 40px., umjesto 20px.
Brzo rješenje problema: Postavite prikaz: inline za plutajući blok, i ne brinite element će ostati na nivou bloka.
3px Jog. Suština ove greške je u tome što se tekst koji se nalazi pored plutajućeg elementa čudno pomera za tri piksela, kao pod uticajem polja sile koje se nalazi oko lebdećeg elementa. Brzo rješenje problema: Postavite širinu i visinu zahvaćenog teksta.
Pojavljuje se u IE7 Greška donje margine, kada je roditeljski element plutajući element, a njegov podređeni element koji se nalazi unutar njega je također plutajući element. Element pretka zanemaruje donju marginu (margin-bottom) djeteta. Brzo rješenje problema: Koristite padding-bottom in roditeljski element, umjesto djetetove margine dna.
Tačno koristeći CSS float svojstva može biti izazovan zadatak čak i za iskusnog dizajnera izgleda. Ovaj članak sadrži primjere korištenja float-a, kao i neke greške, sa ilustrativnim primjerima.
Šta je float?
Neki elementi u CSS-u su na nivou bloka i stoga počinju s nova linija. Na primjer, ako postavite dva pasusa sa P oznakama, oni će biti jedan ispod drugog. Ostali elementi su “mala slova”, tj. prikazani su na stranici u jednom redu.Jedan od načina da ponovo dodijelite float tip elementima je korištenje svojstva float. Klasičan primjer je korištenje float-a za poravnavanje slike lijevo ili desno. Evo jednostavnog HTML koda za sliku i pasus:
Lorem ipsum...
Prikazuju se u novom redu:
Dodajte malo CSS slika:
img ( float: desno; margina: 20px; )
Ovo rezultira pravim poravnanjem:
Ako ima više teksta, pasus će se omotati oko slike:
Recimo da trebamo uvući 20 piksela između slike i teksta. Ova konstrukcija neće raditi: p (margina: 20px;)
Ispravno ovako:
img (margina: 20px;)
Zašto uvlačenje pasusa ne radi? Da to shvatimo, dodajmo okvir:
P (obrub: puni 1px crni; )
Rezultat bi vas mogao iznenaditi:
Ispostavilo se da je slika unutar pasusa! Zato to ne radi margin property U prvom slučaju. Da biste to popravili, možete primijeniti float:left na pasus i odrediti apsolutnu širinu:
Čudna pravila plutanja
Idemo dalje složene opcije upotreba float-a: na pravila koja regulišu plutajuće objekte. Ovo može biti potrebno prilikom postavljanja galerije slika. Na primjer:
Podrazumevano, svaka stavka liste će se pojaviti u novom redu. Ako na svaku primijenite float:left, slike će se poredati s prijelomom linije:
Li ( float: lijevo; margina: 4px; )
Ali šta ako su slike različite visine?
Ako stavkama liste dodamo prikaz u jednom redu, izgledat će malo ljepše:
Li ( prikaz: inline; )
Sada poravnajmo okomito:
Img ( okomito poravnanje: vrh; )
Treba imati na umu da u slučaju veće visine slika, preostale slike se samo omotavaju oko prethodne, na primjer:
Primjer promjene redoslijeda elemenata - na primjer, imamo listu elemenata po redu:
Ako želimo da ih postavimo obrnutim redosledom, samo koristimo float:desno umesto float:left, i ne moramo da menjamo redosled u HTML-u:
Upotreba float-a je zgodna za grupisanje elemenata na stranici, ali veliki problem je što naredni elementi (tekst ili blok) takođe dobijaju svojstvo float. Na primjer, imamo blok slika:
Tekst ispod njega počinje se omotati oko cijelog bloka:
Da biste to izbjegli, morate koristiti svojstvo clear. Ako ga primijenimo na drugu sliku:
Ul li:nth-child(2) (jasno: lijevo; )
dobijamo ovo:
U ovom slučaju, preostale slike nastavljaju da nasljeđuju float:left. Shodno tome, tekst će se nespretno prikazati:
Morate primijeniti clear:oba na pasus:
P (jasno: oba; )
Naš problem je riješen:
Sada recimo da moramo postaviti pozadinu za galeriju iz prethodnih primjera. Da elementi ne plutaju, to bi izgledalo ovako:
Ul (pozadina: siva; )
Ali ako primijenite float:left na elemente liste, pozadina će potpuno nestati:
Ako prvo postavimo visinu na UL:
Ul (visina: 300px; )
Ovo takođe ne rešava problem, jer... Dimenzije pozadine su apsolutno podešene. U tome će nam pomoći klasa clearfix, koja će se primijeniti na div na istom nivou kao i UL elementi.
Clearfix (očisti: oba;)
Postoji još jedno rješenje koje koristi overflow:
Ul (preljev: auto; )
Devet pravila za float elemente:
- Plutajući elementi ne mogu se protezati izvan ruba svog roditeljskog kontejnera.
- Svaki plutajući element će se pojaviti desno ili ispod prethodnog sa float:left, ili lijevo i ispod prethodnog sa float:right.
- Blok sa float:left ne može biti dalje udesno od bloka sa float:right.
- Plutajući element ne može se protezati izvan gornje granice svog spremnika.
- Plutajući element ne može biti postavljen više od svog roditeljskog bloka ili prethodnog plutajućeg elementa.
- Plutajući element ne može se postaviti više od prethodne linije inline elemenata
- Plutajući blok treba da bude postavljen što je više moguće.
- Jedan plutajući element koji slijedi drugi ne može ići dalje od svog kontejnera - prelama se u sljedeći red.
- Blok sa float:left treba da bude pozicioniran što je više moguće ulevo, a blok sa float:right treba da bude pozicioniran što je više moguće udesno.
Nakon što su me po šezdeset osmi put pitali zašto je blok sa float-om pogrešno prikazan, odlučio sam da napišem ovu napomenu, koja će objasniti tipične situacije sa kojima se susreće početnik layout dizajner, a takođe i da jednostavno pružim link na ovo članak sljedeći put.
Odricanje od odgovornosti
Nisam profesionalni layout dizajner, iako sam zbog prirode moje djelatnosti morao da postavim više od deset web stranica. Imam prijatelje koji uče layout i želim im pomoći. Najvjerovatnije ih imate i vi. Svrha ovog članka nije reći nešto novo, već govoriti o starom sa stajališta najčešćih problema s kojima se susreću početnici dizajneri izgleda. Ne tvrdim apsolutnu istinitost svojih riječi i bit će mi drago samo ako me ispravite i dopunite.Osobine float elementa koje uvijek trebate imati na umu
ako je postavljeno lijevo ili desno- Stavka je prikazana kao blokovi, kao da ima svojstvo display: block;
- Element širina je komprimirana na veličinu sadržaja, osim ako je širina eksplicitno postavljena za element;
- Element štapići na lijevu (lijevu) ili desnu ivicu (desno);
- Sve ostalo sadržaj stranice u HTML kodu poslije element sa plovkom, obavija ga;
Životni incident #1
Imam dva bloka, primijenio sam float: desno na jedan od blokova, poravnao je udesno, ali je i dalje ostao ispod prvog. Primjer kako to izgleda.
Uzrok
Ako se to dogodi, to znači da ste primijenili float ne na prvi, već na drugi blok. Zbog činjenice da plutajući (onaj sa float) elementom teku samo oni elementi koji se pojavljuju u HTML kodu poslije prvi blok neće teći oko njega.Također, blok elementi po defaultu imaju maksimalnu moguću širinu (dokaz) unutar roditelja. Vaš lebdeći element jednostavno se ne uklapa u prvi blok elementa maksimalne širine, pa se gura prema dolje.
Također Sve sadržaj sajta koji dolazi u HTML kodu poslije plutajući elementi teče oko njih, što često dovodi do neočekivanog efekta.
Rješenje
Rješenje #1. Eksplicitno postavite visinu kontejnera. U slučajevima kada se zna koje dimenzije kontejnera trebaju biti, ovo je najjednostavnije rješenje.Rješenje #2. Dodajte prazan blok sa clear: both . Dodavanjem takvog elementa uklanja se "uzgon" blokova i čini da se kontejner rasteže do svoje pune visine. Semantički, ovo nije najbolje rješenje, jer uvodi dodatni element za označavanje.
Rješenje #3. Primijenite overflow: auto (ili skriveno) svojstvo na kontejner. Uzrokuje da kontejner ponovo izračuna visinu i promijeni je tako da uključuje plutajuće elemente, inače bi morao dodati traku za pomicanje ili ih sakriti. Međutim, to se ponekad dešava, stoga budite oprezni.
UPD
Također pročitajte iz kao nastavak rasprave o svojstvu float.
Prije nekoliko godina, kada su programeri prvi put počeli prelaziti na HTML markiranje bez tablice, svojstvo CSS float odjednom je preuzelo vrlo važnu ulogu. Razlog zašto je svojstvo float postalo tako uobičajeno bio je taj što se, prema zadanim postavkama, blok elementi nisu poredali jedan pored drugog u formatu zasnovanom na stupcima. Pošto su kolone potrebne u gotovo svakoj CSS šemi, ovo svojstvo se naviklo - pa čak i zloupotrebilo.
Nekretnina float u CSS-u, omogućava programeru da uključi kolone nalik tablici u HTML oznake bez korištenja tablica. Ako ne zbog imovine float, onda CSS rasporedi ne bi bili mogući osim upotrebe apsolutnog i relativnog pozicioniranja - što bi bilo neuredno i činilo izgled neodrživim.
U ovom članku ćemo vam reći šta je imovina float i kako to utiče na elemente u specifičnim kontekstima. Također ćemo pogledati neke od razlika koje se mogu pojaviti s ovim svojstvom u najčešće korištenim pretraživačima. Na kraju ćemo pokazati nekoliko praktičnih primjena imovine float. Ovo bi takođe trebalo da obezbedi sveobuhvatnu i detaljnu diskusiju o ovoj osobini i njenom uticaju na razvoj CSS-a.
Definicija i sintaksa CSS Float svojstva
Svrha svojstva float je da gurne blok element ulijevo ili udesno, izvodeći ga iz toka dokumenta. Ovo omogućava da se trenutni sadržaj prirodno skupi oko plutajućeg elementa. Ovaj koncept je sličan onome što svakodnevno viđate u štampanoj literaturi, gdje su fotografije i drugi grafički elementi poravnati s jedne strane, a sadržaj (obično tekst) prirodno teče oko elementa poravnat oko lijeve ili desne ivice.
Slika iznad prikazuje odeljak „Čitaoci“ na sajtu .net magazina sa 3 fotografije čitača koje su levo poravnate u svojim kolonama sa tekstom koji se premotava oko slika. Ovo je osnovna ideja koja stoji iza svojstva float u CSS rasporedu i demonstrira jednu od tehnika koje se koriste u dizajnu tabele.
Efikasnost upotrebe float-a u rasporedu sa više kolona objasnio je Douglas Bowman 2004. u svojoj klasičnoj prezentaciji No More Tables:
Bowman je objasnio principe koji stoje iza rasporeda bez tablice, koristeći staru Microsoftovu stranicu kao referencu. Floats su se uočljivo koristili u njegovom lažnom prepravljanju Microsoftove oznake.
Sintaksa
Svojstvo Float može imati jednu od 4 vrijednosti: lijevo, desno, ništa i naslijediti. Ovo je deklarirano kao što je prikazano u kodu ispod:
#sidebar (float: lijevo; )
#sidebar ( float: lijevo; |
Najčešće korištene vrijednosti su lijevo i desno. Vrijednost none ili početna float vrijednost za bilo koji element HTML stranice je zadana vrijednost. Naslijeđena vrijednost, koja se može primijeniti na gotovo svako CSS svojstvo, ne radi u verzijama Internet Explorera, uključujući 7.
Svojstvo float ne zahtijeva primjenu bilo koje druge osobine na element float, međutim, kako bi ispravno funkcionirao, float će raditi efikasnije pod određenim okolnostima.
Tipično, plutajući element bi trebao imati eksplicitno postavljena širina(osim ako nije zamijenjeni element, poput slike). Ovo osigurava da se float ponaša kako se očekuje i pomaže u izbjegavanju problema u nekim pretraživačima.
#sidebar (float: lijevo; širina: 350px; )
#sidebar ( float: lijevo; širina: 350px; |
Karakteristike plutajućih elemenata
Slijedi lista ponašanja plutajućih elemenata, prema CSS2 specifikaciji:
Blok koji lebdi s lijeve strane bit će pomaknut ulijevo sve dok njegova lijeva ivica (ili ivica ako nema ruba) ne dodirne ili rub sadržaja bloka ili rub drugog plutajućeg bloka
Ako veličina plutajućeg bloka premašuje raspoloživi horizontalni prostor, tada će plutajući blok biti pomaknut prema dolje
Nepozicionirani, neplutajući blok elementi djeluju kao plutajući elementi, tj. je izvan toka dokumenata
Rubovi plutajućeg bloka neće odgovarati rubovima susjednih blokova
Korijenski element( ) ne može se plutati
Inline element, onaj koji je plutajući, pretvara se u blok element
Plutajte u praksi
Najčešći slučaj upotrebe svojstva float je plutanje slike sa tekstom koji je prelama. Na primjer:
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
CSS primijenjen na sliku u okviru iznad izgleda ovako:
img ( float: lijevo; margina: 0 15px 5px 0; granica: čvrsta 1px #bbb; )
img ( float: lijevo; margina : 0 15px 5px 0 ; granica : čvrsta 1px #bbb ; |
Jedino svojstvo koje može postići ovaj efekat je svojstvo float. Ostala svojstva (margina i granica) postoje iz estetskih razloga. Ostali elementi u bloku (tagovi
Sa tekstom u njima) ne trebaju nikakvi stilovi.
Kao što je ranije spomenuto, plutajući elementi se istiskuju iz toka dokumenta, a ostali blok elementi ostaju u toku, ponašajući se kao da plutajući element nije tamo. Ovo je vizuelno demonstrirano u nastavku:
Ovaj okvir je povučen lijevo
Ovo
Element ima drugačiju boju pozadine kako bi pokazao da se proteže širinom svog roditelja, zanemarujući lebdeći element. Ovaj umetnuti tekst, međutim, obavija se oko plutajućeg okvira.
U gornjem primjeru
element na nivou bloka, tako da zanemaruje plutajući element koji obuhvata širinu kontejnera (minus padding). Svi elementi blok tipa koji nisu plutajući će se ponašati slično.
Tekst u paragrafu je inline, tako da premotava plutajući element. Plutajući blok također ima opcije margine da ga pomakne od pasusa, čineći ga vizualno čistim tako da element pasusa ignorira plutajući blok.
Čišćenje plovaka
Problemi sa rasporedom sa plutajućim elementima se obično rešavaju korišćenjem svojstva clear CSS, koje vam omogućava da "izbrišete" lebdeće elemente sa leve ili desne strane, ili oboje.
Pogledajmo primjer koji se često viđa - podnožje koje se obavija oko desne strane rasporeda s 2 klona:
Lijeva kolona pluta ulijevo
Ako pogledate IE6 i IE7 stranicu, nećete vidjeti nikakve probleme. Lijeva i desna kolona su na mjestu, a podnožje je na dnu. Ali u Firefoxu, Operi, Safariju i Chromeu, vidjet ćete da se podnožje pomiče s mjesta. Ovo je uzrokovano primjenom float-a na stupce. Ovo je ispravno ponašanje, iako je problematičnije. Da bismo riješili ovaj problem, koristimo gornje jasno svojstvo, u odnosu na podnožje:
#footer (jasno: oba; )
#footer ( jasno: oba; |
Rezultat je prikazan u nastavku:
Lijeva kolona pluta ulijevo
Desna kolona je također plutala lijevo
Svojstvo clear će obrisati samo plutajuće elemente, tako da primjena clear: oba na oba stupca ne bi dovela do pada podnožja, jer podnožje nije plutajući element.
čista imovinaće obrisati samo plutajuće elemente. Upotreba clear je sljedeća: oba stupca neće izostaviti podnožje jer ono nije plutajući element.
Zato koristite clear na elementima koji ne plutaju, pa čak i ponekad na lebdećim elementima, da biste prisilili elemente stranice da zauzmu svoje određene pozicije.
Popravljanje odustajanja roditelja
Jedna od najčešćih karakteristika float markupa je „napusti roditelj“. To je prikazano u primjeru ispod:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Primijetite da se osnova plutajuće slike pojavljuje izvan svog roditelja. Roditelj nije u potpunosti proširen da sadrži plutajuću sliku. Ovo je uzrokovano onim što smo ranije raspravljali: plutajući element je izvan prirodnog toka dokumenta, iako su svi elementi bloka prikazani, ali plutajući element nije tamo. Ovo nije CSS greška, sve je u skladu sa CSS specifikacijama. Svi pretraživači rade isto u ovom primjeru. Treba reći da u ovom primjeru dodavanje širine kontejnera može spriječiti problem u IE-u, ali bi također trebalo riješiti problem za Firefox, Opera, Safari ili Chrome.
Rješenje 1: plovak za kontejner
Najjednostavniji način da se riješi ovaj problem je da float roditeljski element:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Kontejner se sada širi kako bi primio sve podređene elemente. Ali nažalost, ova popravka će raditi samo u ograničenom broju slučajeva, budući da plutajući roditelj može imati neželjene posljedice po vaš izgled.
Rješenje 2: Dodajte dodatne oznake
Ovo je zastarjela metoda, ali je jednostavna opcija. Jednostavno dodajte dodatni element na dno posude i "očistite" ga. Ovako će izgledati HTML kod nakon implementacije ove metode:
XHTML
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. |
I kao rezultat, CSS se primjenjuje na nove elemente:
Clearfix (očisti: oba;)
Clearfix ( jasno: oba; |
To možete učiniti i putem
tag sa trenutnim stilom. U svakom slučaju, dobit ćete željeni rezultat: roditeljski kontejner će se proširiti kako bi uključio svu svoju djecu. Ali ova metoda se ne preporučuje jer dodaje nesemantički kod vašoj oznaci.
Rješenje 3: pseudoelement poslije
Pseudoelement :after dodaje element renderiranoj HTML stranici. Ova metoda je prilično široko korištena za rješavanje problema sa čišćenjem plovka. Ovako izgleda CSS:
Clearfix:after (sadržaj: "."; prikaz: blok; visina: 0; jasno: oba; vidljivost: skriveno; )
Očisti popravak:nakon ( sadržaj : "." ; displej: blok; visina: 0; jasno: oba; vidljivost: skrivena; |
CSS klasa "clearfix" primjenjuje se na svaki kontejner koji ima float djecu i ne proširuje se da ih uključi.
Ali ova metoda ne radi za Internet Explorer do verzije 7, tako da za IE morate koristiti jednu od sljedećih opcija:
Clearfix (prikaz: inline-block; ) .clearfix (zum: 1; )
Clearfix ( prikaz: inline-block; Clearfix ( zum: 1; |
U zavisnosti od vrste problema, imate jedno od dva rešenja koja će rešiti ovaj problem u Internet Explorer-u. Treba napomenuti da svojstvo zumiranja nije standardno Microsoft svojstvo i stoga će vaš CSS postati nevažeći.
Pošto :after pseudo-element ne radi u IE6/7, kod je malo naduvan i zeznut, a potreban je dodatni stil koji ne vrijedi samo za IE, tako da ovo rješenje nije najbolji način, ali to je vjerovatno najbolje što smo još pogledali.
Rješenje 4: Svojstvo prelijevanja
Daleko najbolji i najlakši način za rješavanje problema roditeljskog napuštanja je dodavanje overflow: hidden ili overflow: auto roditeljskom elementu. Jasan je, jednostavan za održavanje, radi u skoro svim pretraživačima i ne dodaje nepotrebne oznake.
Obratite pažnju da sam rekao "skoro" u svim pretraživačima. To je zato što ne radi u IE6. Ali, u mnogim slučajevima, roditeljski kontejner će imati postavljenu širinu, što rješava problem u IE6. Ako roditeljski kontejner nema širinu, možete dodati IE6 pojedinačni stil sa sljedećim kodom:
// Ova ispravka je samo za IE6 .clearfix (visina: 1%; overflow: vidljivo; )
// Ova ispravka je samo za IE6 Clearfix ( visina: 1%; preliv: vidljiv; |
U IE6, svojstvo visine se pogrešno tretira kao min-height, tako da to prisiljava kontejner da uključi svoju djecu. Svojstvo Overflow se zatim vraća na "vidljivo" kako bi se osiguralo da sadržaj nije skriven ili skrolovan.
Jedina mana korišćenja metode prelivanja (u bilo kom pretraživaču) je mogućnost da će sadržaj elementa imati trake za pomeranje ili sakriti sadržaj. Ako postoje elementi s negativnim marginama ili apsolutnim pozicioniranjem u roditelju, oni će biti skriveni ako se protežu izvan nadređenog, tako da ovu metodu treba pažljivo koristiti. Također treba napomenuti da ako je sadržani element imao određenu visinu ili minimalnu visinu, onda definitivno ne biste mogli koristiti metodu prelijevanja.
Dakle, nije baš lako riješiti ovaj problem preko pretraživača. Ali gotovo svaki problem čišćenja plovka može se riješiti jednom od gore navedenih metoda.
Povezane float greške u Internet Exploreru
Tokom godina, postojali su brojni članci objavljeni na internetu u kojima se raspravlja o uobičajenim greškama povezanim s plutajućim vrijednostima u CSS označavanju. Svi oni, što nije iznenađujuće, bave se problemima specifičnim za Internet Explorer. Ispod ćete pronaći listu veza do brojnih članaka koji raspravljaju o pitanjima vezanim za float:
Promjena svojstva float pomoću JavaScripta
Da biste promijenili CSS vrijednost u JavaScript-u, morate pristupiti stilu objekta pretvaranjem predviđenog CSS svojstva u "Camel case", na primjer, CSS svojstvo "margin-left" postaje marginLeft, svojstvo background-color postaje BackgroundColor. , i tako dalje. Ali sa svojstvom float, stvari su drugačije jer je riječ float već rezervirana u JavaScript-u. Stoga će sljedeće biti netačno:
Stil. styleFloat = "lijevo" ;
// Za sve ostale pretraživače
myDiv. stil. cssFloat = "lijevo" ;
Praktična upotreba floata
Floats se mogu koristiti za rješavanje brojnih problema u CSS markiranju. Ovdje su opisani neki primjeri.
2-kolona, fiksne širine
3 kolone, raspored jednake visine
Plutajuća slika s naslovom.
Slično onome o čemu smo ranije raspravljali u Float in Practice, Max Design opisuje kako lebdenje slike s naslovom omogućava tekstu da se prirodno omota oko nje.
Horizontalna navigacija sa neuređenim listama
Svojstvo float je ključna komponenta u kodiranju horizontalnih navigacijskih traka zasnovanih na spriteovima. Chris Spooner iz Line25 opisuje kreiranje Menu of Awesomeness, koji označava
Da bismo demonstrirali važnost svojstva float u ovom primjeru, evo snimka ekrana iste slike nakon upotrebe firebug-a za uklanjanje float: lijevo:
Foto galerije zasnovane na mreži
Jednostavna upotreba svojstva float je float:left niz fotografija sadržanih u neuređenoj listi, što daje isti rezultat kao ono što biste vidjeli u označavanju tablice.
Stranica proizvoda Foremost Canada (pogledajte sliku iznad) prikazuje svoje proizvode u obliku mreže pored bočne trake. Fotografije se prikazuju kao neuređena lista sa svojstvom float, za sve
Paragon Furniture's Futons stranica (pogledajte sliku iznad) je još jedan primjer stranice proizvoda koja koristi neuređenu listu s plutajućim oznakama
Stranica s rezultatima pretraživanja iStockphoto (vidi sliku iznad) ima istu mrežu strukturiranih fotografija, ovdje fotografije sadrže float:left
Poravnanje polja sa dugmetom
Modeliranje zadanih elemenata obrasca za različite pretraživače može biti problematično. Često u jedno polje obrasca, kao što je formular za pretragu, morate staviti element pored dugmeta „pošalji“.
U modernom web dizajnu, nekretnina float koristi se skoro na svakom koraku. Ali unatoč ovoj rasprostranjenosti, ne razumiju svi mehanizam plutajućih blokova, njihovo ponašanje i posljedice koje njihova upotreba može imati.
Šta je "float"?
Float Ovo je CSS svojstvo pozicioniranja. Da biste razumjeli njegovu suštinu i porijeklo, morate obratiti pažnju na štampani dizajn. U štampanim rasporedima, slika se može postaviti tako da tekst teče oko nje. Ovo se obično zove " prelamanje teksta".
U izgledu stranice može se odrediti blok koji sadrži tekst premotavanje teksta oko slike ili zanemarite omotavanje. Zanemarivanje prelamanja teksta omogućit će da riječi teku preko slike kao da je nema. Ovo čini razliku da li je slika dio toka na stranici ili ne. U web dizajnu je sve vrlo slično.
U web dizajnu, element sa CSS svojstvom primijenjenim na njega float ponašat će se kao slika s premotavanjem teksta oko nje u odštampanom rasporedu. Plutajući elementi ostaju dio toka web stranice. Ovo se prilično razlikuje od apsolutno pozicioniranih elemenata, koji se uklanjaju iz toka, kao da je u štampanom rasporedu bloku teksta rečeno da ignoriše prelamanje slike. Apsolutno pozicionirani elementi ne utiču na postavljanje drugih elemenata, a ostali elementi ne utiču na njihov položaj.
Postavljanje svojstva float za elemente koji koriste CSS izgleda ovako:
#sidebar (float: desno; )
Postoje četiri važeće vrijednosti za imovinu float - lijevo, u pravu, nijedan, nasljediti. Prva dva lijevo I u pravu označavaju smjer lokacije - lijevo i desno. Nema- zadana vrijednost, označava da element nije plutajući i nasljediti instrukcije elementu da naslijedi vrijednost svojstva float od roditeljskog elementa.
Za šta se koristi float?
Osim jednostavnog primjera premotavanja teksta oko slike, float može se koristiti za kreiranje web izgleda.
Float, također je pogodan za korištenje za male elemente rasporeda. Na primjer, uzmimo ovaj mali fragment web stranice. Ako postavimo svojstvo float Za malu sliku avatara, kada se veličina slike promijeni, omot će se promijeniti u skladu s novim dimenzijama slike:
Isti raspored se može implementirati korištenjem relativnog pozicioniranja kontejnera i apsolutnog pozicioniranja avatara i teksta unutar njega. Ali u rasporedu implementiranom prema ovoj shemi, promjena veličine slike neće utjecati na tekstualni blok, jer elementi s apsolutnim pozicioniranjem ne utječu na druge elemente, a drugi elementi ne utječu na njih.
Resetovanje omota
Jasno povezana imovina sa imovinom float. Element sa skupom svojstava jasno neće se kretati prema gore oko elementa sa postavljenim svojstvom float, ali će se kretati prema dolje zanemarujući tok. I opet, ilustracija koja će sve objasniti bez daljnjeg.
U gornjem primjeru, bočna traka lebdi desno od glavnog bloka sadržaja. „Podnožje“ se pomerilo na slobodan prostor ispod bočne trake, teče oko bloka sa glavnim sadržajem. Da biste riješili ovaj problem, morate navesti vrijednost za svojstvo clear:both podnožja kako biste "očistili" tok oko oba stupca.
#footer (jasno: oba; )
Nekretnina jasno ima četiri značenja. Oba koristi se za ublažavanje protoka u oba smjera. lijevo I U redu se koriste za poništavanje jednog smjera - lijevo ili desno, respektivno. Nema- zadana vrijednost. Nasljediti mogla bi biti peta vrijednost, ali iznenađujuće nije podržana Internet Explorer. Resetiranje samo lijevog ili desnog toka je prilično rijetko, ali ima praktične prednosti.
Great Collapse
Jedna stvar u vezi sa radom float Ono što je zbunjujuće je efekat ovog svojstva na roditeljske elemente. Ako roditeljski element ne sadrži elemente osim float-a, tada se njegova visina doslovno smanjuje. Ovo nije uvijek primjetno, posebno ako roditeljski element nema istaknutu pozadinu, ali je važno imati na umu.
Ali alternativa takvom kolapsu je još gora. Razmotrite sljedeći scenario:
Ako se gornji blok automatski proširi kako bi primio plutajući element, završit ćemo s prazninom u toku teksta između pasusa, bez načina da to popravimo. Da je to slučaj, programeri bi se mnogo češće žalili na ovakvo ponašanje plutajućih blokova nego sada zbog kolapsa.
Sažimanje uvijek treba imati na umu kako bi se spriječilo čudno ponašanje rasporeda i problemi s više pretraživača. Ovaj problem možemo riješiti korištenjem jasno nakon plutajućeg elementa u kontejneru, ali prije nego što se kontejner zatvori.
Tehnike otkazivanja omota
Ako ste u situaciji u kojoj znate gdje će biti sljedeći element, možete koristiti clear:oba i krenuti svojim poslom. Ovo je idealno jer ne zahtijeva nikakve hakove ili dodatne elemente. Ali nažalost, obično ne ide sve onako kako želimo, i u ovom slučaju možete koristiti sljedeće alate.
Metoda praznog bloka.
To je bukvalno prazan blok.
. Ponekad možete pronaći element
ili bilo koji drugi nasumični element, ali div je najčešći jer nema podrazumevani stil u pretraživačima, nema posebnu funkciju i malo je verovatno da će biti u opštem CSS stilu. Ovu metodu semantički čistunci odbacuju jer njeno prisustvo nema kontekstualno značenje na stranici i postoji samo zbog izgleda. Naravno, u strogom smislu su u pravu, ali on radi svoj posao i nikome ne nanosi štetu.
Prelivna metoda.
Zasnovano na specificiranju CSS svojstava overflow za roditeljski element. Ako je ovo svojstvo postavljeno na auto ili skriveno za roditeljski element, on će se proširiti nakon plutajućeg elementa, efektivno resetujući njegovo omotavanje za naredne elemente. Ova metoda može biti semantički lijepa, jer ne zahtijeva dodatne elemente. Međutim, kao što vidite dodali smo novi div koristiti ovu metodu, koja je ekvivalentna korištenju nesemantičkog praznog bloka i manje je fleksibilna. Također treba imati na umu da je nekretnina overflow nije namijenjen za onemogućavanje premotavanja. Pazite da slučajno ne sakrijete sadržaj ili ne izazovete neželjene trake za pomicanje.
Jednostavan način čišćenja.
Koristi CSS pseudo-selektor (:after) za uklanjanje omotača. Umjesto korištenja imovine overflow Za roditeljski element postavite dodatnu klasu za njega, na primjer "clearfix" i koristite sljedeći CSS stil:
Clearfix:after (sadržaj: "."; vidljivost: skrivena; prikaz: blok; visina: 0; jasno: oba; )
Ovo koristi mali dio sadržaja skriven od pogleda, koji se nalazi iza nadređenog elementa, koji resetuje omot. Ova metoda nije potpuna, jer je potrebno poboljšati kako bi podržala starije pretraživače.
Različite situacije zahtijevaju različite metode blefiranja. Uzmimo kao primjer mrežu različitih tipova blokova.
Da bismo bolje vizualno kombinirali slične blokove, trebali bismo započeti novu liniju kada se boja promijeni. Možemo koristiti metod prelivanja ili rasvjetljavanja ako svaka grupa boja ima roditeljski element. Ili koristimo metod praznog bloka između grupa. Tri roditeljska bloka koja prethodno nisu postojala ili tri prazna bloka koja ranije nisu postojala. Na vama je da odlučite koja je metoda bolja.
Problemi sa plutajućim elementima
Plutajući elementi su često kritizirani zbog svoje krhkosti. Veliki dio ove krhkosti dolazi od IE6 i njegovih float orijentisane greške. Ali kako sve više programera odbija podršku za IE6, možda nećete razmišljati o tome, ali za one kojima je stalo do kompatibilnosti, evo kratke liste.
Gurnuti dole, je simptom da je element unutar plutajućeg bloka širi od tog bloka (ovo se obično dešava sa slikama). Većina pretraživača će prikazati lebdeći element koji strši, ali to neće imati utjecaja na izgled. IE će proširiti plutajući blok i često to ima drastičan učinak na izgled. Tipičan primjer je slika koja strši iz glavnog bloka sadržaja, gurajući bočnu traku prema dolje.
Brzo rješenje problema: koristite overflow: skriveno; da odrežete višak.
Dvostruka margina greška- još jedna stvar koju treba zapamtiti kada radite sa IE6. Ova greška se izražava u činjenici da ako je polje na istoj strani na kojoj je orijentisano float, polje je udvostručeno. Na primjer:
Ubacićemo levo polje 40px., umjesto 20px.
Brzo rješenje problema: Postavite prikaz: inline za plutajući blok, i ne brinite element će ostati na nivou bloka.
3px Jog. Suština ove greške je u tome što se tekst koji se nalazi pored plutajućeg elementa čudno pomera za tri piksela, kao pod uticajem polja sile koje se nalazi oko lebdećeg elementa. Brzo rješenje problema: Postavite širinu i visinu zahvaćenog teksta.
Pojavljuje se u IE7 Greška donje margine, kada je roditeljski element plutajući element, a njegov podređeni element koji se nalazi unutar njega je također plutajući element. Element pretka zanemaruje donju marginu (margin-bottom) djeteta. Brzo rješenje problema: Koristite padding-bottom na roditeljskom elementu umjesto margin-bottom na podređenom elementu.
