Nakon što su me šezdeset osmi put pitali zašto se float blok prikazuje pogrešno, odlučio sam da napišem ovaj post, koji bi objasnio tipične situacije s kojima se susreće početnik layout dizajner, kao i kako bih sljedeći put jednostavno povezao ovaj članak.
Odricanje od odgovornosti
Nisam profesionalni layout dizajner, iako sam po prirodi posla morao dizajnirati više od desetak sajtova. Imam prijatelje koji uče da kucaju i želim im pomoći. Najvjerovatnije ih i vi imate. Svrha ovog članka nije ispričati nešto novo, već ispričati o starom sa stajališta najčešćih problema s kojima se susreću početnici dizajneri izgleda. Ne pretvaram se da sam apsolutna istinitost svojih riječi, i bit će mi drago samo ako me ispravite i dopunite.Svojstva plutanja koja treba imati na umu
ako je postavljeno lijevo ili desno- Stavka prikazana kao blokovi kao da je postavljeno da prikazuje: blok;
- Element smanjuje se u širinu na dimenzije sadržaja, osim ako element ima eksplicitno postavljenu širinu;
- Element štapići lijevo (lijevo) ili desno (desno);
- Sve ostalo sadržaj stranice ide u HTML kodu poslije plutajući element, obavija se oko njega;
Životni slučaj broj 1
Imam dva bloka, plutam: desno do jednog od blokova, on je desno poravnat, ali i dalje ostaje ispod prvog. Primjer kako to izgleda.
Uzrok
Ako se to dogodi, to znači da ste float primijenili ne na prvi, već na drugi blok. Zbog činjenice da je plutajući (onaj sa float) element omotan oko samo onih elemenata koji se nalaze 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 nije u liniji sa prvim blok elementima sa maksimalna širina, tako da je gurnut prema dolje.
Isti način sve sadržaj sajta koji ide u HTML kodu poslije plutajući elementi teku oko njih, što često ima neočekivane efekte.
Rješenje
Rješenje #1. Eksplicitno postavite visinu kontejnera. U slučajevima kada se zna kolika bi trebala biti veličina posude, ovo je najjednostavnije rješenje.Rješenje #2. Dodajte prazan blok sa clear: oboje. Dodavanje takvog elementa čisti "uzgon" blokova i čini da se kontejner rasteže do svoje pune visine. Semantički, ovo nije najviše najbolje rješenje jer uvodi dodatni element za označavanje.
Rješenje #3. Primijeni overflow: auto (ili skriveno) svojstvo na kontejner. Prisiljava kontejner da 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, zato budite oprezni.
UPD
Također pročitajte kao nastavak rasprave o svojstvu float.
Pozdrav dragi čitaoci blog stranice! Nakon veoma značajne pauze, odlučio sam da nastavim temu. učenje CSS-a a današnji članak će biti posvećen stvaranju plutajućih elemenata pomoću plutajućih, uz praktične primjere razmotrit ćemo akciju ovog pravila zajedno sa svojstvom clear za kreiranje kolona, i horizontalni meni.
Za neupućene, mislim da bi bilo ispravnije prvo se upoznati s drugim materijalima na kaskadnim stilovima. Da vas podsjetim da su svi članci na ovu temu nalaze se u odjeljku gdje možete dobiti potrebne informacije.
Plutajući elementi se takođe nalaze u HTML-u kada je potrebno kreirati premotavanje teksta oko istih slika (atribut align img tag sa parametrima lijevo i desno). Dakle, ovaj aspekt je vrlo popularan pri dizajniranju sadržaja web stranice.
Kroz današnju publikaciju ćemo analizirati radnje pravila plutaju (lijevo, desno, nijedno) i čiste uključujući u odnosu na koje su osnova za blok raspored... Naravno, u sadašnjoj fazi, ogromna većina koristi progresivni CMS (posebno WordPress) prilikom kreiranja web stranice. Međutim, vjerujte da će vam poznavanje osnova stilova i jezika označavanja hiperteksta dobro poslužiti u budućnosti.
Kako se plutajući elementi kreiraju u CSS-u pomoću float-a
Za početak, da vas podsjetim da su u normalnom toku web elementi poređani na web stranici u strogom skladu s redoslijedom koji je naveden u kodu. Međutim, kao što znate, uvijek postoje izuzeci. To je logično, jer je potrebna poluga za rješavanje nestandardnih zadataka.
Jedan od ovih alata je, na primjer, koji možete detaljnije pročitati na navedenom linku. Pa, i drugo sredstvo za promjenu redoslijeda standardni displej web elementi su upravo ono što je pravilo float.
Podaci o bilo kojem CSS svojstvu i njegovim vrijednostima mogu se dobiti sa stranice specifikacije W3C, gdje su date potpune informacije (podaci o drugoj verziji stilskih listova, ali to vrijedi i za CSS3, koji je već službeno na snazi , iako nije u potpunosti završen):
Kao što vidite, float može uzeti jedan od tri moguća parametra (lijevo, desno, nijedan) i (naslijediti). Bez plutanja primijenjeno po defaultu i znači da će stavke biti prikazane u redoslijedu prema normalnom toku. Ali desno ili lijevo omogućavaju vam da kreirate plutajuće blokove pomak udesno ili lijevo, respektivno.
Ako se sjećate, najčešće korišteni ponašaju se drugačije (općenito, tip prikaza svih elemenata implementiran je pomoću CSS-a pomoću svojstva Display). Blokirani zauzimaju cijelu dostupnu širinu osim ako nije navedena širina. Visina je određena sadržajem ako parametar visine nije specificiran.
Inline oznake se nalaze na jednoj liniji i prelamaju se u drugu samo ako im ponestane slobodnog prostora. V uobičajen slučaj za njih nije moguće odrediti visinu i širinu. Na osnovu ovih informacija, pogledajmo konkretan primjer.
Radi jasnoće, uključimo CSS pravila (ova metoda se obično rijetko koristi u praksi, ali je vrlo zgodna za testiranje).
Kako bismo bili sigurni da je gore navedeno ispravno, uzimamo dvije inline oznake, pišući za njih svojstva širine i visina kao i jedan blok oznaka... Radi jasnoće, postavimo nijanse boja za svaki blok koristeći pozadinu (možete na sličan način):
Inline element 1 Inline element 2
Rezultirajuća slika će biti sljedeća:
Kao što vidite, dobili smo praktičnu potvrdu da navedena visina (visina: 50px) i širina (širina: 450px) ne rade u normalnim okolnostima za SPAN tag koji je umetnut. Zatim, pokušajmo postaviti svojstvo float desno za prvi inline web element i float lijevo za drugi:
Inline element 1 Inline element 2
Kao rezultat, dobijamo:
Sasvim je očigledno da u ovom slučaju prvi i drugi web element postaju lebdeći (jedan se pomerio skroz ulevo, drugi udesno). Osim toga, dobili su širinu i visinu, koje su specificirane u CSS stilovima.
Štaviše, web elementi identificirani SPAN inline oznakom imaju drugačiju interakciju sa susjednim DIV kontejnerom. Ako dalje uklonimo, recimo, atribut širine iz stilova oba SPAN oznake, tada će njihova širina biti određena sadržajem (u našem slučaju, dužinom teksta s nazivom elemenata):
Sada sadržaj DIV bloka počinje da lebdi desno od float: lijevog elementa. Ima smisla jasnije se upoznati s rezultatima konkretnih praktičnih studija na ovoj web stranici, gdje možete sami pokušati promijeniti područje gledanja i promatrati kako se blokovi ponašaju jedni prema drugima:
Sumirajući, hajde da definišemo neke karakteristike koje će biti svojstvene kontejneru sa jednom ili drugom vrednošću svojstva float (desno ili levo):
- Element se pomiče lijevo ili desno;
- Postaje kockast bez obzira šta je bio prije;
- Ponaša se kao da nema susjednih blok web elemenata (sa prikazom: pravilo bloka). U to se možete uvjeriti ako još jednom pogledate snimke ekrana. ovog odjeljka artikli;
- U isto vrijeme, inline oznake (prikaz: inline) će se omotati oko plutajućih blokova. Ako ponovo pogledate prethodni snimak ekrana, primijetit ćete da se sadržaj DIV kontejnera ("blok element") obavija oko SPAN sa float: lijevo na desno.
- Ako eksplicitno ne navedete širinu plutajućeg bloka (u našem primjeru širina: 450px), tada će ona biti određena njegovim sadržajem;
U ovom primjeru ispitali smo glavne karakteristike plutajućih blokova s različitim parametrima svojstva float i odlučili smo komplicirati zadatak i inline i blok web elemenata (s različitim Prikaz vrijednosti). Da biste konsolidirali materijal, svakako pogledajte informativni video od E. Popova:
Kako napraviti horizontalni meni sa CSS-om (float)
Dalje, pogledajmo vrlo specifičan zadatak za kreiranje horizontalnog menija pomoću plutajućih blokova, koji se vrlo često koristi u razvoju web stranica. Prvo, napravimo, čiji će kod izgledati ovako:
- Stav 1
- Tačka 2
- Tačka 3
- Tačka 4
- klauzula 5
- none - poništava učinak samog svojstva clear, kao rezultat toga sadržaj oznake (na primjer, tekst) teče oko web elementa u skladu sa stilovima navedenim za njega u obliku float-a;
- lijevo i desno - eliminira protok s lijeve ili desne ivice;
- oba - Sprečava istovremeno kretanje i levo i desno. Ovo je najčešće značenje jasno u praktičnoj upotrebi.
- Postoji kontejner sa dva bloka ili više.
- Unutrašnji blokovi imaju CSS float svojstvo lijevo ili desno.
- Ako veličina blokova nije dovoljna, tada sadržaj s dna počinje puzati u blok i cijeli raspored se raspršuje.
- držeći navigacijske tipke koristite float: lijevo:
Da bismo demonstrirali važnost svojstva float u ovom primjeru, evo snimka ekrana iste slike nakon upotrebe firebuga za uklanjanje float: lijevo:
Foto galerije zasnovane na mreži
Jednostavna upotreba svojstva float je da float: ostavi niz fotografija sadržanih u neuređenoj listi, što dobija isti rezultat kao što možete vidjeti u izgledu 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
- elementi su postavljeni na float: lijevo. Ovo radi bolje od mreže, jer se broj fotografija u galeriji može promijeniti i to neće utjecati na oznake.
Paragon Furniture's Futons stranica (pogledajte sliku iznad) ima još jedan primjer stranice proizvoda koja koristi neuređenu listu s plutajućim oznakama
- .
Stranica s rezultatima pretrage iStockphoto (vidi sliku iznad) također ima mrežu strukturiranih fotografija, ovdje fotografije sadrže plutajući: lijevo
oznake, ne- oznake.
Poravnanje polja sa dugmetom
Modeliranje zadanih elemenata obrasca za različitim pretraživačima može biti problematično. Često u jedno polje obrasca, kao što je formular za pretragu, morate staviti stavku pored dugmeta za slanje.
Tačno koristeći CSS float svojstva mogu biti zastrašujući zadatak, čak i za iskusnog dizajnera izgleda. Ovaj članak sadrži opcije za korištenje 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 na novom redu. Na primjer, ako postavite dva pasusa sa P oznakama, oni će se nalaziti jedan ispod drugog. Ostali elementi su "mala slova", tj. prikazano na stranici u jednom redu.Jedan od načina da preraspodijelite float elementima je korištenje svojstva float. Klasičan primjer je korištenje float 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;)Desno poravnanje se postiže:
Ako ima više teksta, pasus će se omotati oko slike:
Recimo da želimo uvući 20 piksela između slike i teksta. Ova konstrukcija neće raditi: p (margina: 20px;)
Ispravite ovako:
img (margina: 20px;)
Zašto uvlačenje ne radi za pasus? Dodajmo obrub da to shvatimo:
P (ivica: puna 1px crna;)
Rezultat bi vas mogao iznenaditi:
Ispostavilo se da je slika unutar pasusa! Dakle, ne radi margin property U prvom slučaju. Da biste to popravili, možete float: lijevo do paragrafa i odrediti apsolutnu širinu:
Čudna pravila plutanja
Pređimo na naprednije slučajeve upotrebe plutajućih: pravila koja regulišu plutajuće. Ovo je često potrebno prilikom kodiranja galerije slika. Na primjer:
Podrazumevano, svaka stavka liste će se pojaviti u novom redu. Ako na svaku primjenimo float: lijevo, slike će biti u jednom redu s prijelomom reda:
Li (float: lijevo; margina: 4px;)
Ali šta ako su slike različite visine?
Ako stavkama liste dodamo prikaz u jednom redu, rezultat je malo ljepši:
Li (prikaz: inline;)
Sada ga poravnajmo okomito:
Img (vertical-align: top;)
Treba imati na umu da u slučaju veće visine slike, ostale slike teku oko prethodne, na primjer:
Primjer promjene redoslijeda stavki - na primjer, imamo listu stavki po redu:
Ako želimo da ih preuredimo, koristimo samo float: desno umjesto float: left, i ne moramo mijenjati redoslijed u HTML-u:
Zgodno je koristiti float za grupisanje elemenata na stranici, ali veliki problem je što naredni elementi (tekst ili blok) također dobijaju svojstvo float. Na primjer, imamo blok slika:
Tekst ispod njega počinje teći po cijelom bloku:
Da biste to izbjegli, morate koristiti svojstvo clear. Ako ga primijenimo na drugu sliku:
Ul li: n-to dijete (2) (čisto: lijevo;)
dobijamo ovo:
U ovom slučaju, ostale slike nastavljaju da nasljeđuju float: left. Shodno tome, tekst će se nespretno prikazati:
Morate primijeniti jasno: oba na pasus:
P (jasno: oba;)
Naš problem je riješen:
Sada recimo da moramo postaviti pozadinu za galeriju iz prethodnih primjera. Da elementi nisu plutajući, rezultat bi bio sljedeći:
Ul (pozadina: siva;)
Ali ako float: lijevo na elemente liste, pozadina potpuno nestaje:
Ako prvo postavimo visinu za UL:
Ul (visina: 300px;)
Ovo takođe ne rješava problem. dimenzije pozadine su apsolutno određene. Pomoći će nam klasa clearfix, koja će biti primijenjena 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 plovke:
- Plutajući elementi ne mogu se protezati izvan ruba svog roditeljskog kontejnera.
- Svaki plutajući element će biti prikazan desno ili ispod prethodnog sa float: lijevo, ili lijevo i ispod, s float: desno.
- Lijevi blok float: ne može biti više udesno od float: desnog bloka.
- Plutajući element ne može ići dalje od vrha svog kontejnera.
- Float se ne može postaviti više od roditeljskog bloka ili prethodnog float-a.
- Plutajući element ne može se postaviti više od prethodne linije inline elemenata
- Plutajući blok treba biti smješten š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.
- Float: lijevo treba biti što je moguće dalje lijevo, a float: desno treba biti što je moguće desno.
- oznake.
Dobijamo nešto ovako:
Sada malo uredimo rezultirajući meni koristeći CSS svojstva: uklonite markere nasuprot svake od stavki koristeći none u stilu liste, pretvorite inline u blok primjenom pravila bloka prikaza na njih, a također dajte svakoj od njih lijepu pozadinu za raznolikost .
Također je korisno postaviti margine za dodatno poboljšanje dizajna laganim pomicanjem stavki menija jedna od druge. Za stranice WordPress web stranice možete postaviti UL tag "menu", za koji navedete potrebne stilove u STYLE.CSS datoteci:
Meni (stil liste: nema; margina: 0; padding: 15px;) .meni li a (prikaz: blok; padding: 10px; pozadina: # EFCDB8;) .meni li (margina: 10px;)
V u ovom slučaju Namjerno ne koristim atribut STYLE, jer ću u ovom slučaju morati nekoliko puta specificirati ista CSS svojstva za svaki LI tag. Kao rezultat naših radnji, meni će izgledati ovako:
Razlika sa prethodna verzija upadljivo, zar ne? Sada imamo sliku koja mnogo više liči na klasičan meni. Istina, točke u njemu se nalaze ne vodoravno, već okomito. Za kompletno rješenje zadaci moraju biti dovršeni za element HTML lista LI svojstvo float lijevo, cijelo CSS pravilo za njega će postati ovako:
Meni li (margina: 10px; float: lijevo;)
Kao rezultat toga, meni će se pretvoriti u horizontalnu verziju:
Mislim da, na osnovu gore navedenih informacija, razumete razlog zašto je došlo do takve metamorfoze. Svaki web-element menija sa float lijevom vođen je pozicijom kontejnera, njegovim granicama i pokušava da se odvija pomicanjem gore i lijevo što je više moguće. Tako se dogodilo i sa blokom "Tačka 1", koji se nalazi u skladu s tim.
"Stavka 2" je takođe pomerena ulevo, ali je dalji napredak blokirala prva web stavka u meniju. itd. Kao rezultat, dobili smo horizontalni sekvencijalni lanac svih komponenti menija. Sve detalje možete vidjeti sami. Sada pokušajmo umjetno smanjiti širinu okvira za prikaz:
U slučaju da plutajući element ne nađe mjesta na vrhu, on zauzima najvišu vertikalnu poziciju u donjem redu i pomiče se u krajnju lijevu poziciju. U praksi se često dešava da naziv određene tačke može biti duži i da se ne uklapa u standardne granice. Ako je ovo prva stavka, onda bi cijeli meni mogao izgledati ovako:
U ovom slučaju, "Stavka 4" prvo uzima u obzir najgornju lociranu ivicu i tek onda se pomiče u krajnju lijevu poziciju, ali nailazi na prvi web element. Ako se visina, recimo, treće tačke pokaže veća, onda se slika mijenja u sljedeću:
Tada će "Tačka 3" poravnati svoju poziciju sa donjom ivicom posljednjeg web elementa u gornjem redu i tek tada će se pomjeriti ulijevo. Svi gore opisani pokreti trebali bi vam pomoći da shvatite suštinu efekta float na izgled web elemenata na stranici.
Ako u praktičnom rasporedu postoje slični problemi, tada umjesto svojstva CSS float, možete koristiti druge metode za kreiranje horizontalnog menija. Međutim, to je već posebna tema, na koju ćemo se svakako osvrnuti u budućnosti.
Efekat primjene svojstva clear (oba, lijevo, desno)
Sada da vidimo kako iskoristiti prednosti plutajućih elemenata, ali u isto vrijeme napraviti sljedeće blokove na web stranici ispod da uzmu u obzir njihov položaj i veličinu. To se može postići jasnim pravilom. Opet, sve informacije se mogu dobiti iz primarnog izvora (W3C konzorcijum):
Pravilo CSS clear ima četiri moguća značenja a svojstvo none je zadano, što je prirodno, budući da pruža standardni tok koda. Također clear (nijedno, lijevo, desno, oba) nasljeđuje roditeljsku oznaku (naslijediti).
Suština ovog pravila, napisanog za određeni blok, je da otkaže akciju ovisno o njezinoj vrijednosti:
Ne razumem ništa? Nejasno i samo na intuiciji hvatate značenje? Ništa, nakon što uzmemo jasan primjer, mislim da će sve doći na svoje mjesto. Da bismo to učinili, postavimo zadatak: rasporedite dva bloka vodoravno jedan pored drugog, a ispod stavite tekst. Ova konstrukcija je prilično uobičajena u rasporedu.
Dakle, uzmimo dva DIV kontejnera, koji shematski mogu predstavljati 2 kolone. Napišimo CSS svojstva za njih, uključujući fiksna širina(širina), boju pozadine i plivajte ih sa float lijevo. Dodajmo im tekst zatvoren u P tag, koji je, kao što znate, inline:
DIV-ovi će biti poređani horizontalno, s tim da će prvi biti što je moguće dalje lijevo. A drugi će se parkirati na njegovu desnu ivicu (za njega će to biti lokacija s lijeve strane), dalje neće dozvoliti da se prvi div pomakne. Ali tekst će nastaviti ovaj red, jer ukupna širina vam omogućava da to učinite:
Kao što možete zamisliti, u ovoj situaciji, naš zadatak se ne može smatrati završenim. Prvo, kada suzite okvir za prikaz za iznos manji od ukupne širine divova, desna kolona skače dole i nalazi se ispod lijeve strane. Drugo, sadržaj trećeg web elementa s tekstom nalazi se jedan pored drugog, a ne na dnu kolona:
Opet, možete sami vidjeti kako će se svi elementi ponašati, umjetno sužavajući i proširujući područje gledanja. Da bismo eliminisali opisane nedostatke, dodajmo kontejner sa CSS svojstvima i postavimo sve postojeće slojeve unutar njega. I također dodajte dodatni prazan DIV sa pravilom CSS clear oba kako biste spriječili da sadržaj donjeg bloka (teksta) teče desno i lijevo od stupaca:
Imajte na umu da stilovima velike dive I dodana margina pravila: 0 auto, sa kojim možete poravnati posudu u sredini. Rezultirajući prikaz će biti sljedeći:
Sada je naš zadatak riješen, jer rezultat odgovara postavljenim uvjetima: dvije kolone su smještene u horizontalnom redu, a sadržaj ispod web elementa (TEXT) u kodu će čvrsto ostati na svom zasluženom mjestu ispod kolona.
Kako se širina područja gledanja smanjuje, struktura će ostati nepromijenjena (u ovom slučaju, horizontalno pomicanje), što možete provjeriti odlaskom na odgovarajuću web stranicu s rješenjem ovaj primjer... Kao dodatak, pogledajte video Evgenija Popova, koji daje primjer označavanja web stranice pomoću float i clear (očisti tok):
Pitanja o tome kako funkcionišu CSS svojstva float left i float right dolaze sa zavidnom regularnošću. Ovo postaje posebno bolna tema za layout dizajnere i programere, koji su godinama sastavljali rasporede na stolovima, a onda su primorani da rade sa blokovima. Osim toga, ovo je otežano problemima rasporeda cossbrowsera, iako je nedavno ova tema nekako postala manje nervozna za stručnjake.
U svakom slučaju, umjesto da stalno odgovaram na ista pitanja o tome kako funkcionišu svojstva float lijevo i float desno, odlučio sam da napišem post i pošaljem na njega sve koji pate.
Uvjeravam vas da u ovom postu neće biti ništa posebno novo. Na netu ima dosta sličnih informacija. Ali svaki put sam bio umoran od pokazivanja primjera na prstima ili traženja linka gdje da pošaljem drugog svog zaposlenika. Stoga će vam ovdje biti predstavljena kratka zbirka onoga s čime se najčešće suočavate.
Blokovi u kontejneru sa postavljenim CSS svojstvima float lijevo i float desno
Tipičan problem:
Ilustracije u nastavku prikazuju nekoliko takvih slučajeva.
Situacija sa dva ili više CSS float lijevog polja
To bi trebao biti:
Situacija kada jedan blok ima CSS float svojstvo lijevo, a drugi desno
To bi trebao biti:
Kako to izgleda s pogrešnim rasporedom:
Zašto je došlo do ove situacije
Naše float lijevo i float desno CSS kutije su unutar kontejnera s nekim donjim paddingom. Uprkos onome što se čini istinitim postaviti parametre, donja margina ne samo da ne radi, već i sadržaj donjih blokova puzi u naš gornji blok.
Stvar je u tome da blokovi sa datim svojstvima float ne utiču na promjenu visine svog kontejnera.
Na primjer: u prvom slučaju svi blokovi unutar kontejnera plutaju. Stoga će visina kontejnera biti nula.
U drugom slučaju, pored plutajućih blokova, imamo i tekst u kontejneru. Stoga će visina kontejnera odgovarati visini teksta koji ispunjava ovaj blok. Prema tome, ako je tekst veći od visine unutrašnjih plutajućih blokova, nećete primijetiti problem. Ako nema dovoljno teksta, kao u gornjem primjeru, tada će se sadržaj donjih blokova popeti na donju ivicu kontejnera.
Rješenje 1 dodajte prazan blok sa CSS svojstvom clear: both
Prije završne oznake kontejnera, postavite blok sa CSS svojstvom clear: both. Tada će se kontejner proširiti na donji blok, jer ovo svojstvo blokira utjecaj blokova sa CSS float lijevo i float desno.
Primjer koda stranice:
Također, blok sa clear: oba svojstva mogu se postaviti odmah nakon oznake za zatvaranje kontejnera ili nakon posljednjeg plutajućeg bloka. Kontejner neće promijeniti svoju veličinu u ovoj situaciji. Da, i uglavnom neće biti potreban, već blok sa clear: oba svojstva će jednostavno ukloniti sadržaj iz plutajućih blokova.
Primjer koda stranice:
Međutim, ne znaju svi da polje pravaca odgovara determinanti sistema linearnih jednačina, što nije iznenađujuće. Osim toga, determinanta sistema linearnih jednačina kategorički vraća vektor, kako se i očekivalo. Blizina tačke je i dalje tražena. Lema, kao što slijedi iz navedenog, u suštini stabilizira apstraktni divergentni niz, što će nas nesumnjivo dovesti do istine. Lema inteligentno odmotava neoborivi prirodni logaritam, a dalja računanja ostavljamo učenicima kao jednostavan domaći zadatak.
Primjer CSS koda:
Kontejner (prikaz: blok;) .in_block (prikaz: blok; plutajući: lijevo; širina: 100px; visina: 100px; margin-desno: 10px;) .clear (prikaz: blok! Važno; margina: 0px! Važno; padding: 0px! Važno; jasno: oba! Važno; plutajući: nema! Važno; visina: 1px! Važno; širina: automatski! Važno;)
Metodički, ovo nije najelegantnije rješenje, iako zaslužuje pravo na život, jer je prilično efikasno. Očigledan nedostatak je činjenica koju moramo dodati dodatni kod u tekst stranice.
Rješenje 2 za eksplicitno specificiranje visine kontejnera
Opcija visine kontejnera je dobra samo ako znate tačnu veličinu sadržaja kontejnera. Tada će naš CSS izgledati otprilike ovako:
Kontejner (prikaz: blok; visina: 100px;) .in_block (prikaz: blok; plutajući: lijevo; širina: 100px; visina: 100px; margina desno: 10px;)
U slučaju kada je sadržaj dinamičan ili je raspored "gumasti" i širina kontejnera se može promijeniti, onda ovo neće biti tako dobro rješenje.
Rješenje 3 postaviti svojstvo CSS overflow za kontejner
Ako postavite vrijednost svojstva kontejnera overflow jednaka auto ili skriveno, pretraživač će ponovo izgraditi kontejner da primi sve plutajuće okvire i ne prikazuje trake za pomeranje.
Ako za svojstvo prelivanja koje ste postavili auto value, onda budite spremni na činjenicu da se u nekim situacijama trake za pomicanje i dalje mogu pojaviti. Stoga biste trebali sveobuhvatno provjeriti izgled u različitim načinima.
Primjer CSS koda:
Kontejner (display: block; overflow: auto;) .in_block (display: block; float: lijevo; širina: 100px; visina: 100px; margin-desno: 10px;)
Dva bloka na istom nivou sa specificiranim CSS svojstvima plutaju lijevo i plutaju desno
Tipična situacija: tekst koji se obavija oko dva bloka s određenim sadržajem. U ovom slučaju, blokovi se nalaze sa strane teksta.
To bi trebao biti:
Prije nekoliko godina, kada su programeri prvi put počeli prelaziti na HTML bez tablica, CSS float svojstvo je odjednom preuzelo vrlo važnu ulogu. Razlog zašto je float postalo toliko uobičajeno je taj što se, prema zadanim postavkama, blok elementi nisu poređali jedan pored drugog u formatu zasnovanom na stupcima. Budući da su stupci potrebni u gotovo svakoj CSS shemi, ovo svojstvo se naviklo - pa čak i zloupotrebilo.
Nekretnina float u CSS-u, omogućava programeru da uključi kolone nalik tablici HTML markup bez upotrebe tabela. Ako ne zbog imovine float, zatim šeme CSS plasman ne bi bilo moguće, osim korištenja apsolutnog i relativnog pozicioniranja - što bi bilo neuredno i činilo bi šemu označavanja nezgodnom za održavanje.
U ovom članku ćemo vam reći, šta je vlasništvo float i kako to utiče na elemente u specifičnim kontekstima... Također ćemo istaknuti neke od razlika koje ovo svojstvo može imati u najčešće korištenim pretraživačima. Na kraju ćemo demonstrirati nekoliko praktične primjene svojstva float... Takođe bi trebalo da pruži sveobuhvatnu i detaljnu diskusiju o ovoj osobini i njenom uticaju na razvoj CSS-a.
Definicija i sintaksa svojstva CSS Float
Svrha svojstva float je da gurne blok element ulijevo ili udesno, izvodeći ga iz toka dokumenta. Ovo omogućava da se tekući sadržaj prirodno omota oko plutajućeg elementa. Ovaj koncept je sličan onom koji svakodnevno viđate u štampi, gde su fotografije i ostalo grafičkih elemenata poravnati s obje strane, a sadržaj (obično tekst) prirodno teče oko elementa poravnat oko lijeve ili desne ivice.
Na gornjoj slici, odeljak „Čitači sajtova“ .net magazina, sa 3 fotografije čitalaca poređanih levo u njihovim kolonama sa tekstom koji premotava slike. Ovo je osnovna ideja koja stoji iza svojstva float u CSS rasporedu i demonstrira jedan način koji se koristi u dizajnu tabele.
Efikasnost upotrebe float-a u rasporedu sa više kolona objasnio je Douglas Bowman 2004. godine u svojoj klasičnoj prezentaciji, No More Tables:
Bowman je objasnio principe koji stoje iza izgleda bez proračunskih tablica, koristeći staru Microsoftovu stranicu kao referencu. Float je upadljivo korišten u svom lažnom redizajn Microsoftove oznake.
Sintaksa
Svojstvo Float može imati jednu od 4 vrijednosti: lijevo (lijevo), desno (desno), bez poravnanja (nijedno) i naslijeđeno (naslijeđeno). 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 nije ništa ili izvorno značenje plutaju za bilo koji HTML element-pages su zadane. Naslijediti vrijednost(naslijediti) koje se može primijeniti na skoro svako CSS svojstvo ne radi u verzijama Internet Explorer uključujući 7.
Svojstvo float ne zahtijeva primjenu bilo koje druge osobine na element float, međutim, da bi ispravno funkcionirao, float će raditi efikasnije pod određenim okolnostima.
Općenito, plutajući element bi trebao imati eksplicitno postavljena širina(osim ako nije zamijenjeni element, kao što je slika). 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
Ispod je lista ponašanja plutajućih elemenata, prema CSS2 specifikaciji:
Lijevo plutajuća kutija bit će pomaknuta ulijevo do svoje lijeve ivice (ili granice ruba ako nema ruba) dodirujući ili rub sadržaja kutije ili rub drugog plutajućeg okvira
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 se poravnati sa rubovima susjednih blokova
Korijenski element ( ) ne može se plutati
Inline element koji je plutajući se pretvara u blok element
Plutajte u praksi
Najčešći slučaj upotrebe svojstva float je plutajuća slika s premotavanjem teksta. 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, lebdeći elementi se izbacuju 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:
Ova kutija je leva
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 se, međutim, obavija oko plutajućeg okvira.
U gornjem primjeru
element na nivou bloka, tako da zanemaruje plutajući element koji se proteže po širini kontejnera (minus padding). Svi elementi koji ne plutaju u bloku će se ponašati slično.
Tekst u paragrafu je umetnut, tako da se premotava oko plutajućeg elementa. Dostupni su i plutajući blokovi parametri margine da ga pomerite iz pasusa, čineći ga vizuelno jasnim tako da element pasusa ignoriše plutajući blok.
Čišćenje plovaka
Problemi sa pozicioniranjem 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 ili obe strane.
Pogledajmo uobičajen primjer - podnožje se obavija oko desne strane oznake 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 podnožje klizi 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 gore spomenuto clear svojstvo, u odnosu na podnožje:
#podnožje (čisto: 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.
Svojstvo clear će izbrisati samo plutajuće elemente. Upotreba clear je da oba stupca neće izostaviti podnožje jer ono nije plutajući element.
Stoga, koristite clear na nepomičnim elementima, a ponekad čak i plutajućim elementima, kako bi elementi stranice zauzeli svoje mjesto.
Zaključavanje roditelja
Jedan od mnogih zajedničke karakteristike float markup je "drop-parent". 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.
Imajte na umu da se dno lebdeće slike pojavljuje izvan svog nadređenog. Roditelj nije u potpunosti proširen da sadrži plutajuću sliku. To je zbog onoga š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. Moram reći da u ovom primjeru dodavanje širine kontejnera može spriječiti problem u IE-u, ali problem treba riješiti i za Firefox, Opera, Safari ili Chrome.
Rješenje 1: Plutajte za kontejner
Najlakši način da riješite 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đeni elementi... Ali nažalost ovaj popravak će funkcionirati samo u ograničen broj slučajevima jer plutajući roditelj može imati neželjene posljedice po vaš izgled.
Rješenje 2: Dodavanje dodatne oznake
Ovo je zastarjela metoda, ali jednostavnija opcija. Samo dodajte dodatni element na dno posude i "očistite" ga. Ovako će HTML izgledati 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 sa
tag sa aktivnim stilom. U svakom slučaju, dobijate željeni rezultat: roditeljski kontejner će se proširiti da uključi svu svoju decu. Međutim, ova metoda se ne preporučuje jer dodaje nesemantički kod u vašu oznaku.
Rješenje 3: pseudoelement poslije
The: after pseudo-element dodaje element renderiranoj HTML stranici. Ova tehnika se dosta široko koristila za rješavanje problema sa čišćenjem plutanja. Ovako izgleda CSS:
Obriši popravku: poslije (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 lebdeće podređene elemente i ne širi se da ih uključi.
Ali ova metoda ne radi za Internet Explorer prije verzije 7, tako da za IE morate primijeniti jednu od sljedećih opcija:
Clearfix (prikaz: inline-block;). Clearfix (zum: 1;)
Clearfix ( prikaz: inline-block; Clearfix ( zumiranje: 1; |
U zavisnosti od vrste problema, imate jedno od dva rešenja koja će rešiti problem u Internet Explorer-u. Treba napomenuti da svojstvo zumiranja nije standardno svojstvo Microsofta i stoga će vaš CSS postati nevažeći.
Pošto: nakon što pseudo-element ne radi u IE6/7, dobijamo malo naduvan i škakljiv kod, a potreban je dodatni stil koji ne vrijedi samo za IE, tako da ovo rješenje nije najbolji način ali vjerovatno najbolji koji smo do sada pregledali.
Rješenje 4: Svojstvo prelijevanja
Daleko najbolji i najlakši način da se riješi problem roditeljskog napuštanja je dodavanje overflow: hidden ili overflow: auto roditeljskom elementu. Jasan je, jednostavan za održavanje, radi u gotovo svim pretraživačima i ne dodaje nepotrebne oznake.
Imajte na umu 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 stil samo za IE6 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 smatra min-visinom, 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.
Jedini nedostatak upotrebe metode prelivanja (u bilo kojem pretraživaču) je mogućnost da će sadržaj elementa imati trake za pomicanje ili sakriti sadržaj. Ako postoje elementi sa negativnim marginama ili apsolutnim pozicioniranjem u roditelju, onda će oni biti skriveni ako izađu izvan granica roditelja, tako da ovu metodu treba koristiti s oprezom. 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 prelazak preko pretraživača ovaj problem... Ali gotovo svaki problem čišćenja plovka može se riješiti jednom od gore navedenih metoda.
Float povezane greške u Internet Exploreru
Tokom godina, na internetu su objavljeni brojni članci o kojima se raspravlja uobičajene greške vezano za plutanje CSS markup... 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 on. Ali sa svojstvom float, to je drugačije, jer je reč float već rezervisana 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 raznih problema u CSS označavanju. Ovdje su opisani neki primjeri.
2 kolone, fiksne širine
3 kolone, raspored jednake visine
Plutajuća slika s naslovom.
Slično onome o čemu smo ranije govorili u “Float in Practice”, Max Design opisuje kako lebdeti sliku s naslovom, omogućavajući 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 kako da kreirate Menu of Awesomeness koji označava
