U modernom web dizajnu, vlasništvo plutati koristi se gotovo na svakom koraku. No unatoč ovoj prevalenciji, ne razumiju svi mehanizam plutajućih blokova, njihovo ponašanje i kakve posljedice može imati njihova uporaba.
Što je "float"?
Plutati Ovo je svojstvo CSS pozicioniranja. Da biste razumjeli njegovu bit i podrijetlo, morate obratiti pozornost na tiskani dizajn. U tiskanim izgledima, slika može biti postavljena tako da tekst teče oko nje. To se obično naziva " prelamanje teksta".
U izgledu stranice može se odrediti blok koji sadrži tekst za korištenje omatanje teksta oko slike ili zanemarite omot. Ignoriranje prelamanja teksta omogućit će riječima da teku preko slike kao da je nema. To čini razliku je li slika dio toka na stranici ili ne. U web dizajnu sve je vrlo slično.
U web dizajnu, element na koji se primjenjuje CSS svojstvo plutatiće se ponašati kao slika oko koje se omotava tekst u ispisanom izgledu. Plutajući elementi ostaju dio tijeka web stranice. Ovo se prilično razlikuje od apsolutno pozicioniranih elemenata, koji su uklonjeni iz toka, kao da je u ispisanom rasporedu bloku teksta rečeno da zanemari prelamanje slike. Apsolutno pozicionirani elementi ne utječu na postavljanje drugih elemenata, a ostali elementi ne utječu na njihovo postavljanje.
Postavljanje svojstva plutati za elemente koji koriste CSS izgleda ovako:
#sidebar ( float: desno; )
Postoje četiri važeće vrijednosti za svojstvo plutati - lijevo, pravo, nikakav, naslijediti. Prva dva lijevo I pravo označite smjer lokacije - lijevo i desno, respektivno. Nijedan- zadana vrijednost, označava da element nije plutajući i naslijediti upućivanje elementa da naslijedi vrijednost svojstva plutati od nadređenog elementa.
Za što se koristi plovak?
Osim jednostavnog primjera omatanja teksta oko slike, plutati može se koristiti za izradu web izgleda.
Plutati, također je prikladan za korištenje za male elemente izgleda. Na primjer, uzmimo ovaj mali fragment web stranice. Ako postavimo svojstvo plutati Za malu sliku avatara, kada se veličina slike promijeni, omot će se promijeniti u skladu s novim dimenzijama slike:
Isti izgled može se implementirati korištenjem relativnog pozicioniranja spremnika 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, budući da elementi s apsolutnim pozicioniranjem ne utječu na druge elemente, a drugi elementi ne utječu na njih.
Ponovno postavljanje omota
Čisto povezana imovina s imovinom plutati. Element sa skupom svojstava čisto neće se kretati prema gore oko elementa s postavljenim svojstvima plutati, ali će se kretati prema dolje zanemarujući protok. I opet ilustracija koja će sve objasniti bez daljnjeg.
U gornjem primjeru, bočna traka je plutala desno od bloka glavnog sadržaja. "Podnožje" je premješteno na slobodni prostor ispod bočne trake, teče oko bloka s glavnim sadržajem. Da biste riješili ovaj problem, morate navesti vrijednost za svojstvo podnožja clear:both da biste "očistili" tok oko oba stupca.
#footer ( jasno: oboje; ) 
Vlasništvo čisto ima četiri značenja. Oba koristi se za rasterećenje protoka u oba smjera. Lijevo I Pravo koriste se za resetiranje u jednom smjeru - lijevo ili desno. Nijedan- zadana vrijednost. naslijediti mogla bi biti peta vrijednost, ali iznenađujuće nije podržana Internet Explorer. Resetiranje samo lijevog ili desnog toka prilično je rijetko, ali ima praktične prednosti.
Veliki kolaps
Jedna stvar o radu s plutati Ono što je zbunjujuće je učinak koji ovo svojstvo ima na roditeljske elemente. Ako nadređeni element ne sadrži elemente osim float-a, tada njegova visina doslovno pada. To nije uvijek vidljivo, pogotovo ako nadređeni element nema istaknutu pozadinu, ali važno je imati na umu.
Ali alternativa takvom kolapsu još je gora. Razmotrite sljedeći scenarij:
Ako se gornji blok automatski proširi kako bi prihvatio plutajući element, završit ćemo s prazninom u tijeku teksta između odlomaka, bez mogućnosti da to popravimo. Da je to tako, programeri bi se mnogo češće žalili na ovakvo ponašanje plutajućih blokova nego sada na kolaps.
Sažimanje uvijek treba imati na umu kako biste spriječili čudno ponašanje izgleda i probleme s više preglednika. Ovaj problem možemo riješiti korištenjem čisto nakon plutajućeg elementa u spremniku, ali prije nego što se spremnik zatvori.
Tehnike otkazivanja omota
Ako ste u situaciji u kojoj znate gdje će biti sljedeći element, možete koristiti clear:both i nastaviti svojim poslom. Ovo je idealno jer ne zahtijeva nikakve hakove ili dodatne elemente. No, nažalost, obično ne ide sve kako želimo, au ovom slučaju možete koristiti sljedeće alate.
Metoda praznog bloka.
To je doslovno prazan blok.
. Ponekad možete pronaći element
ili bilo koji drugi slučajni element, ali div je najčešći budući da nema zadani stil u preglednicima, nema posebnu funkciju i malo je vjerojatno da će biti u općem CSS stilu. Ovu metodu odbacuju semantički čistunci jer njezina prisutnost nema kontekstualno značenje na stranici i postoji samo zbog izgleda. Naravno da su u strogom smislu u pravu, ali on radi svoj posao i nikome ne nanosi štetu.
Metoda prelijevanja.
Na temelju specificiranja CSS svojstava prelijevanje za nadređeni element. Ako je ovo svojstvo postavljeno na auto ili skriven za roditeljski element, proširit će se nakon plutajućeg elementa, učinkovito poništavajući omatanje sljedećih elemenata. Ova metoda može biti semantički lijepa, budući da 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 imovina prelijevanje nije namijenjen za onemogućavanje omotanja. 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 omatanja. Umjesto korištenja imovine prelijevanje Za nadređeni element postavite dodatnu klasu za njega, na primjer "clearfix" i koristite sljedeći CSS stil:
Clearfix:after ( sadržaj: "."; vidljivost: skriveno; prikaz: blok; visina: 0; jasno: oboje; )
Ovo koristi mali dio sadržaja skriven od pogleda, smješten nakon nadređenog elementa, koji poništava omot. Ova metoda nije potpuna jer je treba poboljšati kako bi podržavala starije preglednike.
Različite situacije zahtijevaju različite metode blefiranja. Uzmimo kao primjer mrežu različitih vrsta blokova.
Da bismo bolje vizualno kombinirali slične blokove, trebali bismo započeti novi red kada se promijeni boja. Možemo koristiti metodu preljeva ili svjetla ako svaka grupa boja ima nadređeni element. Ili koristimo metodu praznog bloka između grupa. Tri nadređena bloka koja prethodno nisu postojala ili tri prazna bloka koja nisu prethodno postojala. Na vama je da odlučite koja je metoda bolja.
Problemi s plutajućim elementima
Plutajući elementi često su kritizirani zbog svoje krhkosti. Velik dio ove krhkosti dolazi od IE6 i njegovih float-orijentirane greške. Ali kako sve više programera odustaje od podrške za IE6, možda nećete razmišljati o tome, ali za one kojima je stalo do kompatibilnosti, evo kratkog popisa.
Potisnuti, je simptom da je element unutar plutajućeg bloka širi od tog bloka (to se obično događa sa slikama). Većina će preglednika 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 glavnog sadržaja i gura bočnu traku prema dolje.
Brzo rješenje problema: koristi overflow: skriveno; odrezati višak.
Greška s dvostrukom marginom- još jedna stvar koju treba zapamtiti kada radite s IE6. Ova greška se izražava u činjenici da ako je polje na istoj strani na koju je orijentirano plutati, polje se udvostručuje. Na primjer:
Ubacit ćemo lijevo polje 40 px., umjesto 20 px.
Brzo rješenje problema: Postavite display: inline za plutajući blok i ne brinite element će ostati na razini bloka.
3px Jog. Suština ovog buga je da je tekst koji se nalazi pored plutajućeg elementa čudno pomaknut za tri piksela, kao da je pod utjecajem polja sile koje se nalazi oko plutajućeg elementa. Brzo rješenje problema: Postavite širinu i visinu zahvaćenog teksta.
Pojavljuje se u IE7 Greška na donjoj margini, kada je nadređeni element plutajući element, a njegov potomak smješten unutar njega je također plutajući element. Element pretka zanemaruje donju marginu (margin-bottom) djeteta. Brzo rješenje problema: Koristite padding-bottom na nadređenom elementu umjesto margin-bottom na podređenom elementu.
Ispravna upotreba svojstva CSS float može biti izazovan zadatak čak i za iskusnog dizajnera izgleda. Ovaj članak sadrži primjere korištenja float-a, kao i neke pogreške, s ilustrativnim primjerima.
Što je float?
Neki elementi u CSS-u su na razini bloka i stoga počinju u novom retku. Na primjer, ako postavite dva odlomka s oznakama P, oni će biti jedan ispod drugog. Ostali elementi su "mala slova", tj. prikazuju se na stranici u jednom redu.Jedan od načina za ponovno dodjeljivanje tipa float 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 odlomak:
Lorem ipsum...
Prikazuju se u novom retku:
Dodajte malo CSS-a na sliku:
img ( float: desno; margina: 20px; )
To rezultira desnim poravnanjem:
Ako ima više teksta, odlomak će se prelamati 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 odlomka ne radi? Da bismo to shvatili, dodajmo okvir:
P (obrub: puna 1px crna;)
Rezultat bi vas mogao iznenaditi:
Ispada da je slika unutar odlomka! Zato svojstvo margine ne radi u prvom slučaju. Da biste to popravili, možete primijeniti float:left na paragraf i odrediti apsolutnu širinu:
Čudna pravila plutanja
Prijeđimo na složeniju upotrebu float-a: pravila koja upravljaju plutajućim objektima. Ovo može biti potrebno prilikom postavljanja galerije slika. Na primjer:
Prema zadanim postavkama, svaka će se stavka popisa pojaviti u novom retku. Ako primijenite float:left na svaku, slike će se poredati s prijelomom retka:
Li ( float: lijevo; margina: 4px; )
Ali što ako su slike različite visine?
Dodamo li prikaz u jednom retku stavkama popisa, izgledat će malo ljepše:
Li ( prikaz: inline; )
Sada poravnajmo okomito:
Slika (okomito poravnanje: vrh;)
Treba imati na umu da u slučaju veće visine slika, preostale slike se okreću oko samo jedne prethodne, na primjer:
Primjer promjene redoslijeda elemenata - na primjer, imamo listu elemenata po redu:
Ako ih želimo staviti obrnutim redoslijedom, samo koristimo float:right umjesto float:left, i ne moramo mijenjati redoslijed u HTML-u:
Korištenje float-a je zgodno za grupiranje elemenata na stranici, ali veliki je problem što sljedeći elementi (tekst ili blok) također dobivaju svojstvo float. Na primjer, imamo blok slika:
Tekst ispod počinje se okretati oko cijelog bloka:
Da biste to izbjegli, morate koristiti svojstvo clear. Ako to primijenimo na drugu sliku:
Ul li:nth-child(2) ( jasno: lijevo; )
Dobivamo ovo:
U ovom slučaju, preostale slike nastavljaju nasljeđivati float:left. Shodno tome, tekst će biti prikazan nespretno:
Morate primijeniti clear:both na paragraf:
P ( jasno: oboje; )
Naš problem je riješen:
Sada recimo da trebamo postaviti pozadinu za galeriju iz prethodnih primjera. Da elementi ne plutaju, izgledalo bi ovako:
Ul (pozadina: siva;)
Ali ako primijenite float:left na elemente popisa, pozadina potpuno nestaje:
Ako prvo postavimo visinu na UL:
Ul (visina: 300px;)
Ovo također ne rješava problem, jer... Dimenzije pozadine su postavljene apsolutno. U tome će nam pomoći klasa clearfix, koja će se primijeniti na div na istoj razini kao i UL elementi.
Clearfix ( jasno: oboje; )
Postoji još jedno rješenje koje koristi overflow:
Ul (preljev: automatski;)
Devet pravila za float elemente:
- Plutajući elementi ne mogu prelaziti rub svog nadređenog spremnika.
- Svaki plutajući element pojavit će se desno ili ispod prethodnog s float:left, ili lijevo i ispod prethodnog s float:right.
- Blok s float:left ne može biti dalje udesno od bloka s float:right.
- Plutajući element ne može se protezati izvan gornje granice svog spremnika.
- Plutajući element ne može se postaviti više od svog roditeljskog bloka ili prethodnog plutajućeg elementa.
- Plutajući element ne može se postaviti više od prethodnog retka inline elemenata
- Plutajući blok treba biti postavljen što je više moguće.
- Jedan plutajući element koji slijedi drugi ne može izaći izvan svog spremnika - prelama se u sljedeći redak.
- Blok s float:left trebao bi biti postavljen što više ulijevo, a blok s float:right trebao bi biti postavljen što je više moguće udesno.
Nakon što su me šezdeset i osmi put pitali zašto se blok s floatom neispravno prikazuje, odlučio sam napisati ovu bilješku, koja bi objasnila tipične situacije s kojima se dizajner izgleda početnik susreće, a također kako bih jednostavno pružila poveznicu na ovo članak sljedeći put.
Odricanje
Nisam profesionalni layouter, iako sam zbog prirode svoje djelatnosti morao layoutirati više od desetak web stranica. Imam prijatelje koji uče raspored i želim im pomoći. Najvjerojatnije ih i vi imate. Svrha ovog članka nije reći nešto novo, već govoriti o starom s gledišta najčešćih problema s kojima se dizajneri početnici susreću. Ne tvrdim za apsolutnu istinitost svojih riječi i bit će mi drago ako me ispravite i dopunite.Svojstva elementa s float-om koja uvijek trebate imati na umu
ako je postavljen lijevo ili desno- Prikazana je stavka poput kockastog, kao da ima svojstvo display: block;
- Element širina je komprimirana na veličinu sadržaja, osim ako je širina izričito postavljena za element;
- Element štapići na lijevi (lijevo) ili desni rub (desno);
- Sve ostalo sadržaj stranice u HTML kodu nakon element s plovkom, obavija ga;
Životni incident #1
Imam dva bloka, primijenio sam float: desno na jedan od blokova, poravnao se udesno, ali je i dalje ostao ispod prvog. Primjer kako to izgleda.
Uzrok
Ako se to dogodi, to znači da niste primijenili float na prvi, već na drugi blok. Zbog činjenice da plutajući element (onaj s float) pokreću samo oni elementi koji se pojavljuju u HTML kodu nakon to, prvi blok neće teći oko njega.Također, elementi bloka prema zadanim postavkama imaju najveću moguću širinu (proof) unutar roditelja. Vaš plutajući element jednostavno ne stane u liniju s prvim elementima bloka maksimalne širine, pa biva gurnut prema dolje.
Također svi sadržaj stranice koji dolazi u HTML kodu nakon plutajući elementi teče oko njih, što često dovodi do neočekivanog učinka.
Riješenje
Rješenje #1. Eksplicitno postavite visinu spremnika. U slučajevima kada se zna koje dimenzije trebaju biti posude, ovo je najjednostavnije rješenje.Rješenje #2. Dodajte prazan blok s jasnim: oboje . Dodavanjem takvog elementa uklanja se "uzgon" blokova i čini da se spremnik rasteže do svoje pune visine. Semantički, ovo nije najbolje rješenje jer uvodi dodatni element označavanja.
Rješenje #3. Primijenite svojstvo overflow: auto (ili skriveno) na spremnik. Uzrokuje da spremnik ponovno 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 događa, pa budite oprezni.
UPD
Također pročitajte kao nastavak rasprave o svojstvu float.
Prije nekoliko godina, kada su programeri prvi put počeli prelaziti na HTML označavanje bez tablice, svojstvo CSS float odjednom je preuzelo vrlo važnu ulogu. Razlog zašto je svojstvo float postalo tako uobičajeno je to što, prema zadanim postavkama, elementi bloka nisu poredani jedan do drugoga u formatu temeljenom na stupcu. Budući da su stupci potrebni u gotovo svakoj CSS shemi, ovo se svojstvo naviklo - pa čak i zlorabilo.
Vlasništvo float u CSS-u, omogućuje razvojnom programeru da uključi stupce nalik tablici u HTML oznake bez upotrebe tablica. Ako ne zbog imovine plutati, tada CSS izgledi ne bi bili mogući osim korištenja apsolutnog i relativnog pozicioniranja - što bi bilo neuredno i učinilo izgled izgleda neodrživim.
U ovom članku ćemo vam reći što je svojstvo plutati i kako utječe na elemente u određenim kontekstima. Također ćemo pogledati neke od razlika koje se mogu pojaviti s ovim svojstvom u najčešće korištenim preglednicima. Na kraju, demonstrirat ćemo nekoliko praktičnih primjena svojstva plutati. Ovo bi također trebalo pružiti sveobuhvatnu i temeljitu raspravu o ovom svojstvu i njegovom utjecaju na razvoj CSS-a.
Definicija i sintaksa svojstava CSS Float
Svrha svojstva float je gurnuti blok element ulijevo ili udesno, uklanjajući ga iz tijeka dokumenta. To omogućuje da se trenutni sadržaj prirodno skupi oko plutajućeg elementa. Ovaj koncept je sličan onome što svakodnevno vidite u tiskanoj literaturi, gdje su fotografije i drugi grafički elementi poredani na jednu stranu, a sadržaj (obično tekst) prirodno teče oko elementa poredanog oko lijevog ili desnog ruba.
Gornja slika prikazuje odjeljak “Čitatelji” na stranici .net magazina s 3 fotografije čitatelja koje su lijevo poravnate u svojim stupcima s tekstom koji se omotava oko slika. Ovo je osnovna ideja iza svojstva float u CSS izgledima i demonstrira jednu od tehnika korištenih u tabelarnom dizajnu.
Učinkovitost korištenja float-ova u rasporedima s više stupaca objasnio je Douglas Bowman 2004. godine u svojoj klasičnoj prezentaciji Nema više tablica:
Bowman je objasnio principe koji stoje iza izgleda bez tablice, koristeći staru Microsoftovu stranicu kao referencu. Floatovi su bili istaknuto korišteni u njegovom lažnom remontu Microsoft markupa.
Sintaksa
Svojstvo Float može uzeti jednu od 4 vrijednosti: lijevo, desno, ništa i naslijediti. Ovo se deklarira kao što je prikazano u donjem kodu:
#sidebar ( float: lijevo; )
#sidebar ( plovak: lijevo; |
Najčešće korištene vrijednosti su lijevo i desno. Vrijednost none ili početna float vrijednost za bilo koji element HTML stranice zadana je vrijednost. Vrijednost nasljeđivanja, koja se može primijeniti na gotovo svako CSS svojstvo, ne radi u verzijama Internet Explorera, uključujući 7.
Svojstvo float ne zahtijeva bilo koje drugo svojstvo da se primijeni na element float, međutim, da bi ispravno funkcioniralo, float će raditi učinkovitije pod određenim okolnostima.
Obično bi plutajući element trebao imati eksplicitno postavljena širina(osim ako se radi o zamijenjenom elementu, poput slike). To osigurava da se float ponaša prema očekivanjima i pomaže u izbjegavanju problema u nekim preglednicima.
#sidebar ( float: lijevo; širina: 350px; )
#sidebar ( plovak: lijevo; širina: 350px; |
Značajke plutajućih elemenata
Slijedi popis ponašanja plutajućih elemenata, prema CSS2 specifikaciji:
Lijevo lebdeći blok će lebdjeti ulijevo sve dok njegov lijevi rub (ili granica ruba 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 vodoravni prostor, tada će plutajući blok biti pomaknut prema dolje
Nepozicionirani, neplutajući blok elementi djeluju kao plutajući elementi, tj. nalazi se izvan tijeka 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
Plutanje u praksi
Najčešći slučaj upotrebe svojstva float je plutanje slike s tekstom koji je omotava. 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 gornjem okviru izgleda ovako:
img ( float: lijevo; margina: 0 15px 5px 0; granica: čvrsta 1px #bbb; )
img( plovak: lijevo; margina: 0 15px 5px 0; granica : čvrsta 1px #bbb ; |
Jedino svojstvo koje može postići ovaj učinak je svojstvo float. Ostala svojstva (margina i rub) postoje iz estetskih razloga. Ostali elementi u bloku (tagovi
S tekstom u njima) ne trebaju nikakvi stilovi.
Kao što je ranije spomenuto, plutajući elementi se guraju izvan tijeka dokumenta, a ostali elementi bloka ostaju u toku, djelujući kao da plutajući element uopće nije tu. To je vizualno prikazano u nastavku:
Ovaj okvir lebdi lijevo
Ovaj
Element ima drugačiju boju pozadine kako bi pokazao da obuhvaća širinu svog roditelja, zanemarujući plutajući element. Ovaj umetnuti tekst, međutim, obavija lebdeći okvir.
U gornjem primjeru
element na razini bloka, tako da zanemaruje plutajući element koji obuhvaća širinu spremnika (minus padding). Svi elementi blok tipa koji nisu plutajući ponašat će se slično.
Tekst u odlomku je umetnut, tako da premotava plutajući element. Plutajućem bloku također su dane opcije margine za pomak u odnosu na odlomak, čineći ga vizualno čistim tako da element odlomka zanemaruje plutajući blok.
Čišćenje plovaka
Problemi s izgledom s lebdećim elementima obično se rješavaju upotrebom svojstva clear CSS, koje vam omogućuje da "očistite" lebdeće elemente s lijeve ili desne strane, ili oboje.
Pogledajmo primjer koji se često može vidjeti - podnožje koje se okreće oko desne strane 2-klonskog izgleda:
Lijevi stupac lebdio je ulijevo
Ako pogledate stranicu IE6 i IE7, nećete vidjeti nikakve probleme. Lijevi i desni stupac 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. To je uzrokovano primjenom float-a na stupce. To je ispravno ponašanje, iako je problematičnije. Da bismo riješili ovaj problem, koristimo gornje svojstvo jasno, u odnosu na podnožje:
#footer ( jasno: oboje; )
#podnožje ( jasno: oboje; |
Rezultat je prikazan u nastavku:
Lijevi stupac lebdio je ulijevo
Desni stupac također je lebdio lijevo
Svojstvo clear će obrisati samo plutajuće elemente, tako da primjena clear: both na oba stupca ne bi uzrokovala padanje podnožja, jer podnožje nije plutajući element.
Svojstvo clear će obrisati samo plutajuće elemente. Upotreba clear-a je sljedeća: oba stupca neće izostaviti podnožje jer ono nije plutajući element.
Stoga koristite clear na elementima koji nisu plutajući, a ponekad čak i na plutajućim elementima, kako biste prisilili elemente stranice da zauzmu svoje naznačene položaje.
Rješavanje roditeljskog ispadanja
Jedna od najčešćih značajki float markupa je "leave-parent". To je prikazano u primjeru u nastavku:
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 baza lebdeće slike pojavljuje izvan svog roditelja. Roditelj nije potpuno proširen da bi sadržavao lebdeću sliku. To je uzrokovano onim o čemu smo ranije govorili: plutajući element je izvan prirodnog tijeka dokumenta, iako su svi elementi bloka prikazani, ali plutajući element nije tamo. Ovo nije CSS bug, sve je u skladu sa CSS specifikacijama. Svi preglednici rade isto u ovom primjeru. Treba reći da u ovom primjeru dodavanje širine spremnika može spriječiti problem u IE, ali bi također trebalo riješiti problem za Firefox, Operu, Safari ili Chrome.
Rješenje 1: Plovak za spremnik
Najjednostavniji način rješavanja ovog problema je float nadređenog elementa:
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.
Spremnik se sada širi kako bi primio sve podređene elemente. Ali nažalost, ovaj će popravak funkcionirati samo u ograničenom broju slučajeva, budući da plutajući roditelj može imati neželjene posljedice za 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" je. Ovako će izgledati HTML kôd 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. |
Kao rezultat toga, CSS se primjenjuje na nove elemente:
Clearfix ( jasno: oboje; )
Clearfix ( jasno: oboje; |
To možete učiniti i putem
označite trenutnim stilom. U svakom slučaju, dobit ćete željeni rezultat: nadređeni spremnik će se proširiti kako bi uključio sve svoje potomke. Ali ova se metoda ne preporučuje jer dodaje nesemantički kod vašem označavanju.
Rješenje 3: Pseudoelement nakon
Pseudoelement :after dodaje element prikazanoj HTML stranici. Ova se metoda prilično široko koristi za rješavanje problema s čišćenjem plovka. Ovako izgleda CSS:
Clearfix:after ( sadržaj: "."; prikaz: blok; visina: 0; jasno: oboje; vidljivost: skriveno; )
Clearfix:nakon ( sadržaj: "." ; prikaz: blok; visina: 0; jasno: oboje; vidljivost: skrivena; |
CSS klasa "clearfix" primjenjuje se na bilo koji spremnik 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 trebate koristiti jednu od sljedećih opcija:
Clearfix ( prikaz: inline-block; ) .clearfix ( zumiranje: 1; )
Clearfix ( prikaz: inline-block; Clearfix ( zumiranje: 1; |
Ovisno o vrsti problema, imate posla s jednim od dva rješenja koja će riješiti ovaj problem u Internet Exploreru. Treba imati na umu da svojstvo zumiranja nije standardno Microsoftovo svojstvo i stoga će vaš CSS postati nevažeći.
Budući da pseudoelement :after ne radi u IE6/7, kod je malo prenapuhan i lukav, a potrebno je dodatno oblikovanje koje nije važeće samo za IE, tako da ovo rješenje nije najbolji način, ali to je vjerojatno najbolje što smo vidjeli.ipak.
Rješenje 4: Svojstvo preljeva
Daleko najbolji i najlakši način za rješavanje problema ispadanja roditelja je dodavanje overflow: hidden ili overflow: auto nadređenom elementu. Jasan je, jednostavan za održavanje, radi u gotovo svim preglednicima i ne dodaje nikakve nepotrebne oznake.
Primijetite da sam rekao "skoro" u svim preglednicima. To je zato što ne radi u IE6. Ali, u mnogim slučajevima, nadređeni spremnik će imati postavljenu širinu, što rješava problem u IE6. Ako nadređeni spremnik nema širinu, možete dodati IE6 pojedinačni stil sa sljedećim kodom:
// Ovaj popravak je samo za IE6 .clearfix ( visina: 1%; preljev: vidljiv; )
// Ovaj popravak je samo za IE6 Clearfix ( visina: 1%; preljev: vidljiv; |
U IE6, svojstvo visine pogrešno se tretira kao minimalna visina, pa to prisiljava spremnik da uključi svoju djecu. Svojstvo Overflow se zatim vraća na "vidljivo" kako bi se osiguralo da sadržaj nije skriven ili da se pomiče po njemu.
Jedina mana korištenja metode prelijevanja (u bilo kojem pregledniku) je mogućnost da će sadržaj elementa imati trake za pomicanje ili sakriti sadržaj. Ako postoje elementi s negativnim marginama ili apsolutnim pozicioniranjem u roditelju, oni će biti skriveni ako se protežu izvan roditelja, stoga ovu metodu treba pažljivo koristiti. Također treba napomenuti da ako sadržani element ima određenu visinu ili minimalnu visinu, tada definitivno ne biste mogli koristiti metodu prelijevanja.
Stoga nije baš lako riješiti ovaj problem s više preglednika. Ali gotovo svaki problem čišćenja plovka može se riješiti jednom od gore navedenih metoda.
Povezane float pogreške u Internet Exploreru
Tijekom godina, na internetu su objavljeni brojni članci koji govore o uobičajenim pogreškama povezanim s floatovima u CSS oznakama. Svi se oni, što ne iznenađuje, bave problemima specifičnim za Internet Explorer. U nastavku ćete pronaći popis poveznica na brojne članke koji raspravljaju o problemima povezanim s plovkom:
Promjena svojstva float pomoću JavaScripta
Da biste promijenili CSS vrijednost u JavaScriptu, morate pristupiti stilu objekta pretvaranjem željenog 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 JavaScriptu. Stoga će sljedeće biti netočno:
Stil. styleFloat = "lijevo";
// Za sve ostale preglednike
myDiv. stil. cssFloat = "lijevo" ;
Praktična upotreba plovka
Floats se mogu koristiti za rješavanje brojnih problema u CSS označavanju. Ovdje su opisani neki primjeri.
2 stupca, fiksne širine
3 stupca, izgled jednake visine
Lebdeća slika s naslovom.
Slično onome o čemu smo ranije govorili u Float in Practice, Max Design opisuje kako lebdenje slike s naslovom omogućuje tekstu da se prirodno omota oko nje.
Horizontalna navigacija s neuređenim popisima
Svojstvo float je ključna komponenta u kodiranju horizontalnih navigacijskih traka temeljenih na spriteovima. Chris Spooner iz Line25 opisuje stvaranje Menu of Awesomeness, koji označava
Kako bismo demonstrirali važnost svojstva float u ovom primjeru, evo snimke zaslona iste slike nakon upotrebe firebuga za uklanjanje float: lijevo:
Fotogalerije temeljene na mreži
Jednostavna upotreba svojstva float je float:left niz fotografija sadržanih u nesređenom popisu, što daje isti rezultat kao ono što biste vidjeli u označavanju tablice.
Stranica proizvoda Foremost Canada (pogledajte gornju sliku) prikazuje svoje proizvode u obliku mreže pored bočne trake. Fotografije se prikazuju kao neuređeni popis sa svojstvom float, za sve
Stranica s futonima tvrtke Paragon Furniture (pogledajte gornju sliku) još je jedan primjer stranice proizvoda koja koristi neuređeni popis s plutajućim oznakama
Stranica rezultata pretraživanja iStockphoto (pogledajte sliku iznad) ima istu mrežu strukturiranih fotografija, ovdje fotografije sadrže float:left
Poravnanje polja s gumbom
Modeliranje zadanih elemenata obrasca za različite preglednike može biti problematično. Često u jedno polje obrasca, kao što je obrazac za pretraživanje, trebate staviti element pored gumba "pošalji".
U modernom web dizajnu, vlasništvo plutati koristi se gotovo na svakom koraku. No unatoč ovoj prevalenciji, ne razumiju svi mehanizam plutajućih blokova, njihovo ponašanje i kakve posljedice može imati njihova uporaba.
Što je "float"?
Plutati Ovo je svojstvo CSS pozicioniranja. Da biste razumjeli njegovu bit i podrijetlo, morate obratiti pozornost na tiskani dizajn. U tiskanim izgledima, slika može biti postavljena tako da tekst teče oko nje. To se obično naziva " prelamanje teksta".
U izgledu stranice može se odrediti blok koji sadrži tekst za korištenje omatanje teksta oko slike ili zanemarite omot. Ignoriranje prelamanja teksta omogućit će riječima da teku preko slike kao da je nema. To čini razliku je li slika dio toka na stranici ili ne. U web dizajnu sve je vrlo slično.
U web dizajnu, element na koji se primjenjuje CSS svojstvo plutatiće se ponašati kao slika oko koje se omotava tekst u ispisanom izgledu. Plutajući elementi ostaju dio tijeka web stranice. Ovo se prilično razlikuje od apsolutno pozicioniranih elemenata, koji su uklonjeni iz toka, kao da je u ispisanom rasporedu bloku teksta rečeno da zanemari prelamanje slike. Apsolutno pozicionirani elementi ne utječu na postavljanje drugih elemenata, a ostali elementi ne utječu na njihovo postavljanje.
Postavljanje svojstva plutati za elemente koji koriste CSS izgleda ovako:
#sidebar ( float: desno; )
Postoje četiri važeće vrijednosti za svojstvo plutati - lijevo, pravo, nikakav, naslijediti. Prva dva lijevo I pravo označite smjer lokacije - lijevo i desno, respektivno. Nijedan- zadana vrijednost, označava da element nije plutajući i naslijediti upućivanje elementa da naslijedi vrijednost svojstva plutati od nadređenog elementa.
Za što se koristi plovak?
Osim jednostavnog primjera omatanja teksta oko slike, plutati može se koristiti za izradu web izgleda.
Plutati, također je prikladan za korištenje za male elemente izgleda. Na primjer, uzmimo ovaj mali fragment web stranice. Ako postavimo svojstvo plutati Za malu sliku avatara, kada se veličina slike promijeni, omot će se promijeniti u skladu s novim dimenzijama slike:
Isti izgled može se implementirati korištenjem relativnog pozicioniranja spremnika 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, budući da elementi s apsolutnim pozicioniranjem ne utječu na druge elemente, a drugi elementi ne utječu na njih.
Ponovno postavljanje omota
Čisto povezana imovina s imovinom plutati. Element sa skupom svojstava čisto neće se kretati prema gore oko elementa s postavljenim svojstvima plutati, ali će se kretati prema dolje zanemarujući protok. I opet ilustracija koja će sve objasniti bez daljnjeg.
U gornjem primjeru, bočna traka je plutala desno od bloka glavnog sadržaja. "Podnožje" je premješteno na slobodni prostor ispod bočne trake, teče oko bloka s glavnim sadržajem. Da biste riješili ovaj problem, morate navesti vrijednost za svojstvo podnožja clear:both da biste "očistili" tok oko oba stupca.
#footer ( jasno: oboje; )
Vlasništvo čisto ima četiri značenja. Oba koristi se za rasterećenje protoka u oba smjera. Lijevo I Pravo koriste se za resetiranje u jednom smjeru - lijevo ili desno. Nijedan- zadana vrijednost. naslijediti mogla bi biti peta vrijednost, ali iznenađujuće nije podržana Internet Explorer. Resetiranje samo lijevog ili desnog toka prilično je rijetko, ali ima praktične prednosti.
Veliki kolaps
Jedna stvar o radu s plutati Ono što je zbunjujuće je učinak koji ovo svojstvo ima na roditeljske elemente. Ako nadređeni element ne sadrži elemente osim float-a, tada njegova visina doslovno pada. To nije uvijek vidljivo, pogotovo ako nadređeni element nema istaknutu pozadinu, ali važno je imati na umu.
Ali alternativa takvom kolapsu još je gora. Razmotrite sljedeći scenarij:
Ako se gornji blok automatski proširi kako bi prihvatio plutajući element, završit ćemo s prazninom u tijeku teksta između odlomaka, bez mogućnosti da to popravimo. Da je to tako, programeri bi se mnogo češće žalili na ovakvo ponašanje plutajućih blokova nego sada na kolaps.
Sažimanje uvijek treba imati na umu kako biste spriječili čudno ponašanje izgleda i probleme s više preglednika. Ovaj problem možemo riješiti korištenjem čisto nakon plutajućeg elementa u spremniku, ali prije nego što se spremnik zatvori.
Tehnike otkazivanja omota
Ako ste u situaciji u kojoj znate gdje će biti sljedeći element, možete koristiti clear:both i nastaviti svojim poslom. Ovo je idealno jer ne zahtijeva nikakve hakove ili dodatne elemente. No, nažalost, obično ne ide sve kako želimo, au ovom slučaju možete koristiti sljedeće alate.
Metoda praznog bloka.
To je doslovno prazan blok.
. Ponekad možete pronaći element
ili bilo koji drugi slučajni element, ali div je najčešći budući da nema zadani stil u preglednicima, nema posebnu funkciju i malo je vjerojatno da će biti u općem CSS stilu. Ovu metodu odbacuju semantički čistunci jer njezina prisutnost nema kontekstualno značenje na stranici i postoji samo zbog izgleda. Naravno da su u strogom smislu u pravu, ali on radi svoj posao i nikome ne nanosi štetu.
Metoda prelijevanja.
Na temelju specificiranja CSS svojstava prelijevanje za nadređeni element. Ako je ovo svojstvo postavljeno na auto ili skriven za roditeljski element, proširit će se nakon plutajućeg elementa, učinkovito poništavajući omatanje sljedećih elemenata. Ova metoda može biti semantički lijepa, budući da 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 imovina prelijevanje nije namijenjen za onemogućavanje omotanja. 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 omatanja. Umjesto korištenja imovine prelijevanje Za nadređeni element postavite dodatnu klasu za njega, na primjer "clearfix" i koristite sljedeći CSS stil:
Clearfix:after ( sadržaj: "."; vidljivost: skriveno; prikaz: blok; visina: 0; jasno: oboje; )
Ovo koristi mali dio sadržaja skriven od pogleda, smješten nakon nadređenog elementa, koji poništava omot. Ova metoda nije potpuna jer je treba poboljšati kako bi podržavala starije preglednike.
Različite situacije zahtijevaju različite metode blefiranja. Uzmimo kao primjer mrežu različitih vrsta blokova.
Da bismo bolje vizualno kombinirali slične blokove, trebali bismo započeti novi red kada se promijeni boja. Možemo koristiti metodu preljeva ili svjetla ako svaka grupa boja ima nadređeni element. Ili koristimo metodu praznog bloka između grupa. Tri nadređena bloka koja prethodno nisu postojala ili tri prazna bloka koja nisu prethodno postojala. Na vama je da odlučite koja je metoda bolja.
Problemi s plutajućim elementima
Plutajući elementi često su kritizirani zbog svoje krhkosti. Velik dio ove krhkosti dolazi od IE6 i njegovih float-orijentirane greške. Ali kako sve više programera odustaje od podrške za IE6, možda nećete razmišljati o tome, ali za one kojima je stalo do kompatibilnosti, evo kratkog popisa.
Potisnuti, je simptom da je element unutar plutajućeg bloka širi od tog bloka (to se obično događa sa slikama). Većina će preglednika 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 glavnog sadržaja i gura bočnu traku prema dolje.
Brzo rješenje problema: koristi overflow: skriveno; odrezati višak.
Greška s dvostrukom marginom- još jedna stvar koju treba zapamtiti kada radite s IE6. Ova greška se izražava u činjenici da ako je polje na istoj strani na koju je orijentirano plutati, polje se udvostručuje. Na primjer:
Ubacit ćemo lijevo polje 40 px., umjesto 20 px.
Brzo rješenje problema: Postavite display: inline za plutajući blok i ne brinite element će ostati na razini bloka.
3px Jog. Suština ovog buga je da je tekst koji se nalazi pored plutajućeg elementa čudno pomaknut za tri piksela, kao da je pod utjecajem polja sile koje se nalazi oko plutajućeg elementa. Brzo rješenje problema: Postavite širinu i visinu zahvaćenog teksta.
Pojavljuje se u IE7 Greška na donjoj margini, kada je nadređeni element plutajući element, a njegov potomak smješten unutar njega je također plutajući element. Element pretka zanemaruje donju marginu (margin-bottom) djeteta. Brzo rješenje problema: Koristite padding-bottom na nadređenom elementu umjesto margin-bottom na podređenom elementu.
