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 susreću dizajneri početnici. 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 pristaje u liniju s prvim elementima bloka maksimalna širina, pa se gura 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 to nije najviše Najbolja odluka, budući da 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.
Pozdrav, dragi čitatelji bloga! Nakon vrlo značajne pauze, odlučio sam nastaviti temu učenje CSS-a a današnji članak bit će posvećen stvaranju plutajućih elemenata pomoću float-a, koristeći praktične primjere pogledat ćemo radnju ovog pravila zajedno sa svojstvom clear za stvaranje stupaca i horizontalni izbornik.
Za neupućene, mislim da bi bilo bolje započeti čitanjem drugih materijala na kaskadnim listovima stilova. Podsjećam da su svi članci na ova tema nalaze se u odjeljku gdje možete pronaći potrebne informacije.
Plutajući elementi također se nalaze u HTML-u kada je potrebno stvoriti tekst koji se omotava oko istih slika (atribut align img oznaka s parametrima lijevo i desno). Stoga je ovaj aspekt prilično popularan kada se razvija sadržaj web stranice.
Kroz današnju publikaciju ćemo analizirati float (lijevo, desno, ništa) i akcije jasnih pravila uključujući u odnosu na, koji su osnova za raspored blokova. Naravno, u sadašnjoj fazi velika većina koristi progresivni CMS (osobito WordPress) pri izradi web stranice. Ipak, vjerujte da će vam poznavanje osnova stilova i jezika za označavanje hiperteksta dobro poslužiti u budućnosti.
Kako stvoriti plutajuće elemente u CSS-u koristeći float
Za početak, dopustite mi da vas podsjetim da su u normalnom tijeku web elementi raspoređeni na web stranici u strogom skladu s redoslijedom navedenim u kodu. Međutim, kao što znate, uvijek postoje iznimke. To je logično jer je za rješavanje nestandardnih problema potrebna poluga.
Jedan od tih alata je npr. o kojem više možete pročitati na navedenoj poveznici. Pa, još jedno sredstvo koje vam omogućuje promjenu redoslijeda standardni prikaz web elemente, to je upravo ono čemu služi float pravilo.
Podaci o bilo kojem CSS svojstvu (propety) i njegovim vrijednostima mogu se prikupiti sa W3C specifikacijske stranice, gdje su dane potpune informacije (podaci za drugu verziju listova stilova, ali to vrijedi i za CSS3, koji je već službeno u sila, iako nije u potpunosti razvijena):
Kao što vidite, float može uzeti jedan od tri moguća parametra (lijevo, desno, nijedan) i (naslijediti). float nijedan parametar primjenjuje prema zadanim postavkama i znači da će elementi biti prikazani redoslijedom koji slijedi normalni tok. Ali desno ili lijevo omogućuju vam stvaranje plutajućih blokova s pomakom udesno ili ulijevo.
Ako se sjećate, oni koji se najčešće koriste ponašaju se drugačije (općenito, vrsta prikaza svih elemenata implementirana je pomoću CSS-a pomoću svojstva Display). Blokirani zauzimaju cijelu dostupnu širinu osim ako nije navedena vrijednost širine. Visina je određena sadržajem ako parametar visine nije naveden.
Inline oznake se postavljaju u jedan redak i premještaju u drugi samo ako ponestane dostupnog prostora za širinu. U uobičajeni slučaj Za njih je nemoguće odrediti visinu i širinu. Na temelju ovih podataka, pogledajmo konkretan primjer.
Radi jasnoće, uključimo CSS pravila (ova se metoda obično rijetko koristi u praksi, ali je vrlo prikladna za testiranje).
Kako bismo bili sigurni da je gore navedeno točno, uzmimo dvije retke oznake, pišući za njih svojstva širine a visina kao i jedan blok oznaka. Kako bismo osigurali jasnoću, postavimo nijanse boja za svaki blok pomoću pozadine (možete učiniti isto):
Inline element 1 Umetnuti element 2
Rezultirajuća slika bit će sljedeća:
Kao što vidite, dobili smo praktičnu potvrdu da navedena visina (height:50px) i širina (width:450px) ne rade u normalnim uvjetima za oznaku SPAN, koja je ugrađena. Zatim pokušajmo postaviti svojstvo float right za prvi ugrađeni web element i svojstvo float left za drugi:
Umetnuti element 1 Umetnuti element 2
Kao rezultat dobivamo:
Sasvim je očito da u ovom slučaju prvi i drugi web element postaju plutajući (jedan se pomaknuo skroz ulijevo, drugi udesno). Osim toga, dobili su širinu i visinu, koje su navedene u CSS stilovima.
Štoviše, web elementi definirani ugrađenom oznakom SPAN različito komuniciraju sa susjednim DIV spremnikom. Ako dodatno uklonimo, recimo, atribut širine iz stilova oba SPAN oznake, tada će njihova širina biti određena sadržajem (u našem slučaju duljinom teksta s nazivom elemenata):
Sada sadržaj DIV bloka počinje teći desno od web elementa s float: lijevo. Ima smisla jasnije se upoznati s rezultatima konkretnih praktičnih istraživanja na ovoj web stranici, gdje možete sami pokušati promijeniti područje gledanja i promatrati kako se blokovi ponašaju jedan u odnosu na drugi:
Da rezimiramo, definirajmo neke značajke koje će biti svojstvene spremniku s jednom ili onom vrijednošću svojstva float (desno ili lijevo):
- Element je pomaknut prema lijevom ili desnom rubu;
- Postaje blokiran bez obzira što je bio prije;
- Ponaša se kao da susjedni blok web elementi (s pravilom display:block) ne postoje. To možete vidjeti ako još jednom pogledate snimke zaslona ovaj odjeljakčlanci;
- U isto vrijeme, ugrađene oznake (display:inline) omotat će se oko plutajućih blokova. Ako ponovno pogledate prethodnu snimku zaslona, primijetit ćete da se sadržaj spremnika DIV ("Block Element") omotava oko SPAN s float:left s desne strane.
- Ako eksplicitno ne navedete širinu plutajućeg bloka (u našem primjeru, width:450px), tada će ona biti određena njegovim sadržajem;
U ovom smo primjeru pogledali glavne značajke plutajućih blokova s različitim parametrima svojstva float i odabrali unutarnje i blok web elemente (s različitim Prikaz vrijednosti). Da biste ojačali materijal, svakako pogledajte informativni video E. Popova:
Kako napraviti horizontalni izbornik koristeći CSS (float)
Zatim ćemo analizirati vrlo specifičan zadatak stvaranja horizontalnog izbornika pomoću plutajućih blokova, koji se vrlo često koristi u razvoju web stranica. Prvo, konstruirajmo jedan, čiji će kod izgledati ovako:
- Stavak 1
- Točka 2
- Točka 3
- točka 4
- točka 5
- nijedan - poništava učinak samog svojstva clear, kao rezultat toga, sadržaj oznake (na primjer, tekst) omotava se oko web elementa u skladu sa stilovima navedenim za njega u obliku float;
- lijevo i desno - eliminira protok oko lijevog, odnosno desnog ruba;
- oboje - sprječava strujanje i desno i lijevo. Ovo je najčešća vrijednost clear-a u praktičnoj uporabi.
- Postoji kontejner s dva ili više blokova.
- Unutarnji blokovi imaju postavljeno svojstvo CSS float lijevo ili desno.
- Ako veličina bloka nije dovoljna, tada sadržaj odozdo počinje stati u blok i cijeli izgled se raspada.
- , držeći navigacijske gumbe koristi float: lijevo:
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
- elementi postavljeni da lebde: lijevo. Ovo funkcionira bolje od rešetke tablice jer se broj fotografija u galeriji može promijeniti bez utjecaja na izgled.
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
oznake, ne- oznake.
Poravnanje polja s gumbom
Zadano modeliranje elemenata obrasca za različitim preglednicima može biti problematično. Često u jedno polje obrasca, kao što je obrazac za pretraživanje, trebate staviti element pored gumba "pošalji".
Točno koristeći CSS float svojstva mogu biti izazov č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 slika:
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 ne ide maržna imovina 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.
- oznake.
Dobivamo nešto poput ovoga:
Sada malo uredimo dobiveni izbornik pomoću CSS svojstava: uklonite markere nasuprot svake stavke koristeći none u stilu popisa, pretvorite mala slova u blok primjenom pravila bloka prikaza na njih, a također, radi raznolikosti, dajte svakoj od njih lijepu pozadinu .
Također bi bilo dobro postaviti marginu za daljnje poboljšanje dizajna laganim odmicanjem stavki izbornika jednu od druge. Za web stranice WordPress stranice možete postaviti UL oznaku "menu", za koju navedete potrebne stilove u STYLE.CSS datoteci:
Izbornik (list-style:none;margin:0;padding:15px;) .menu li a(display:block;padding:10px;background:#EFCDB8;) .menu li(margin:10px;)
U u ovom slučaju Namjerno ne koristim atribut STYLE jer bi me to prisililo da specificiram ista CSS svojstva više puta za svaku oznaku LI. Kao rezultat naših radnji, izbornik će izgledati ovako:
Razlika sa prethodna verzija upečatljivo, zar ne? Sada imamo sliku koja puno više sliči klasičnom jelovniku. Istina, točke u njemu nisu smještene vodoravno, već okomito. Za cjelovito rješenje potrebno je dodati zadatke za element Popis HTML-a LI svojstvo float lijevo, potpuno CSS pravilo za njega bit će ovako:
Izbornik li(margin:10px;float:left;)
Kao rezultat toga, izbornik će se pretvoriti u horizontalnu verziju:
Mislim da na temelju gore navedenih informacija razumijete razlog zašto je došlo do takve metamorfoze. Svaki web-element izbornika s lebdenjem u lijevo vođen je lokacijom spremnika, njegovim granicama i pokušava zauzeti prostor pomicanjem što je više moguće prema gore i ulijevo. To se dogodilo s blokom "Točka 1", koji je bio pozicioniran u skladu s tim.
“Item 2” se također pomaknuo ulijevo, ali je njegovo daljnje kretanje blokirao prvi web element izbornika. I tako dalje. Kao rezultat, dobili smo horizontalni sekvencijalni lanac svih komponenti izbornika. Sve detalje možete vidjeti i sami. Pokušajmo sada umjetno smanjiti širinu prozora:
U slučaju da plutajući element ne nađe mjesto na vrhu, zauzima okomitu poziciju najviše pozicije u donjem redu i pomiče se u krajnju lijevu poziciju. U praksi se često događa da naziv pojedine stavke može biti duži i ne uklapa se u standardne granice. Ako je ovo prva stavka, tada cijeli izbornik može izgledati ovako:
U ovom slučaju, "Stavka 4" prvo uzima u obzir najgornju granicu, a tek onda se pomiče na krajnju lijevu poziciju, ali nailazi na prvi web element. Ako se visina, recimo, treće točke pokaže većom, tada se slika mijenja ovako:
Tada će “Stavka 3” poravnati svoj položaj s donjim rubom zadnjeg web elementa u gornjem retku i tek tada se pomaknuti ulijevo. Svi gore opisani pokreti trebali bi vam pomoći da shvatite bit učinka lebdenja na raspored web elemenata na stranici.
Ako u praktičnom rasporedu postoje sličnih problema, tada umjesto svojstva CSS float možete koristiti druge metode za stvaranje horizontalnog izbornika. No, to je posebna tema kojoj ćemo se svakako posvetiti u budućnosti.
Učinak primjene svojstva jasno (oboje, lijevo, desno).
Sada da vidimo kako iskoristiti značajke plutajućih elemenata u svoju korist, ali u isto vrijeme prisiliti sljedeće blokove na web stranici da uzmu u obzir njihov položaj i veličinu. To se može postići pomoću jasnog pravila. Opet, sve informacije mogu se dobiti iz izvornog izvora (W3C konzorcij):
Pravilo CSS clear ima četiri moguće vrijednosti, pri čemu je svojstvo none zadano, što je prirodno jer osigurava standardni protok koda. Također jasno (nijedan, lijevo, desno, oboje) nasljeđuje se od nadređene oznake (nasljeđuje).
Bit ovog pravila, napisanog za određeni blok, jest poništiti radnju ovisno o njezinoj vrijednosti:
Ne možete ništa razumjeti? Shvaćate li značenje nejasno i samo intuicijom? Ništa, nakon što pogledamo jasan primjer, mislim da će sve doći na svoje mjesto. Da bismo to učinili, postavimo zadatak: postavimo dva bloka vodoravno jedan pored drugog i na dno stavimo tekst. Ovaj dizajn je prilično uobičajen u rasporedu.
Dakle, uzmimo dva DIV spremnika, koji shematski mogu predstavljati 2 stupca. Napišimo CSS svojstva za njih, uključujući fiksna širina(širina), boja pozadine i njihovo pretvaranje u float koristeći float lijevo. Dodajmo im tekst, zatvoren u oznaku P, koja je, kao što znate, mala slova:
DIV-ovi će se poredati u vodoravni red, pri čemu će prvi biti što je moguće više lijevo. A drugi će se parkirati do svog desnog ruba (za njega će to biti mjesto lijevo), i neće dopustiti prvom divu da se pomakne dalje. Ali tekst će nastaviti ovaj red, jer ukupna širina to dopušta:
Kao što razumijete, u ovoj situaciji naš se zadatak ne može smatrati dovršenim. Prvo, kada se okvir za prikaz sužava za iznos manji od ukupne širine divova, desni stupac skače prema dolje a nalazi se ispod lijeve. Drugo, sadržaj trećeg web elementa s tekstom nalazi se pored, a ne na dnu stupaca:
Opet, sami možete vidjeti kako se svi elementi ponašaju, umjetno sužavajući i proširujući područje gledanja. Kako bismo uklonili opisane nedostatke, dodat ćemo spremnik s CSS svojstvima iu njega smjestiti sve postojeće slojeve. Također ćemo dodati dodatni prazan DIV s pravilom CSS clear both kako bismo spriječili da sadržaj donjeg bloka (tekst) teče oko stupaca s desne i lijeve strane:
Napominjemo da stilovima velikih diva I dodana margina:0 automatsko pravilo, koji se može koristiti za centriranje posude. Rezultirajući prikaz izgledat će ovako:
Sada je naš problem riješen, budući da rezultat zadovoljava postavljene uvjete: dva stupca nalaze se u vodoravnom redu, a sadržaj web elementa ispod koda (TEKST) ostat će čvrsto na svom pravom mjestu ispod stupaca.
Ako se smanji širina područja gledanja, struktura će ostati u svom izvornom obliku (ovo će stvoriti 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:
Pitanja o tome kako funkcioniraju svojstva CSS float left i float right pojavljuju se sa zavidnom redovitošću. Ovo postaje posebno bolna tema za dizajnere izgleda i programere koji godinama sastavljaju rasporede na tablicama, a sada su prisiljeni raditi s blokovima. Dodatno, ovo je pogoršano problemima izgleda cossbrowsera, iako je nedavno ova tema nekako počela smanjivati živce stručnjacima.
U svakom slučaju, umjesto da stalno odgovaram na ista pitanja o tome kako funkcioniraju svojstva CSS float left i float right, odlučio sam napisati post i na njega poslati sve koji pate.
Uvjeravam vas da u ovom postu neće biti ništa posebno novo. Ima dosta ovakvih informacija na internetu. Ali svaki put kad pokažem primjer na prstima ili tražim poveznicu kamo poslati sljedećeg zaposlenika, već sam umoran. Stoga ćemo ovdje ukratko predstaviti ono s čime se najčešće susrećemo.
Blokovi u spremniku s postavljenim svojstvima CSS float lijevo i float desno
Tipičan problem:
Ilustracije u nastavku prikazuju nekoliko takvih slučajeva.
Situacija s dva ili više blokova s CSS svojstvom float left
Trebalo bi biti:
Situacija kada jedan blok ima CSS svojstvo float lijevo, a drugi ima desno
Trebalo bi biti:
Kako izgleda ako raspored nije ispravan:
Zašto je došlo do ove situacije?
Naši blokovi sa svojstvima CSS float left i float right smješteni su unutar spremnika koji ima malo podloge na dnu. Unatoč onome što se čini istinitim zadanih parametara, udubljenje odozdo ne samo da ne radi, već se i sadržaj donjih blokova uvlači u naš gornji blok.
Stvar je u tome što blokovi sa specificiranim float svojstvima ne utječu na promjenu visine svog spremnika.
Na primjer: u prvom slučaju svi blokovi unutar spremnika lebde. Stoga će visina spremnika biti nula.
U drugom slučaju, osim plutajućih blokova, imamo i tekst u spremniku. Stoga će visina spremnika odgovarati visini teksta koji ispunjava ovaj blok. Prema tome, ako je tekst veći od visine unutarnjih plutajućih blokova, nećete primijetiti problem. Ako nema dovoljno teksta, kao u gornjem primjeru, tada će se sadržaj donjih blokova proširiti do donje granice spremnika.
Rješenje 1 Dodajte prazan blok s jasnim CSS svojstvom: oboje
Prije završne oznake spremnika morate postaviti blok s CSS svojstvom clear:both. Zatim će se spremnik proširiti na donji blok, jer ovo svojstvo blokira utjecaj blokova sa svojstvima CSS float left i float right.
Primjer koda stranice:
Također možete postaviti blok sa svojstvom clear:both odmah nakon oznake za zatvaranje spremnika ili nakon posljednjeg plutajućeg bloka. Spremnik neće promijeniti svoju veličinu u ovoj situaciji. Da i mimo uglavnom neće biti potreban, ali blok sa svojstvom clear:both jednostavno odsiječe sadržaj plutajućih blokova.
Primjer koda stranice:
Međutim, ne znaju svi da polje smjera odgovara determinanti sustava linearnih jednadžbi, što ne čudi. Štoviše, determinanta sustava linearnih jednadžbi kategorički vraća vektor, kao što se i očekivalo. Blizina točke i dalje je tražena. Lema, kako proizlazi iz navedenog, značajno stabilizira apstraktni divergentni niz, što će nas nedvojbeno dovesti do istine. Lema smisleno razotkriva neoboriv prirodni logaritam, a daljnje izračune prepustit ćemo učenicima kao jednostavnu domaću zadaću.
Primjer CSS koda:
Spremnik ( display: block; ) .in_block ( display: block; float: lijevo; širina: 100px; visina: 100px; margin-desno: 10px; ) .clear ( display: block !important; margin: 0px !important; padding: 0px !važno; jasno: oboje !važno; float: ništa !važno; visina: 1px !važno; širina: auto !važno; )
Metodološki to nije najelegantnije rješenje, iako zaslužuje pravo na život, jer je prilično učinkovito. Očigledni nedostatak je činjenica da moramo dodati dodatni kod u tekst stranice.
Rješenje 2: Eksplicitno odredite visinu spremnika
Mogućnost postavljanja visine spremnika dobra je samo ako točno znate očekivanu veličinu sadržaja tog spremnika. Tada će naš CSS izgledati otprilike ovako:
Spremnik (prikaz: blok; visina: 100px;) .in_block (prikaz: blok; float: lijevo; širina: 100px; visina: 100px; margina-desno: 10px;)
U slučaju kada je sadržaj dinamičan ili je raspored “tečan” i širina spremnika se može mijenjati, onda to neće biti tako dobro rješenje.
Rješenje 3: Postavite svojstvo CSS overflow na spremniku
Ako postavite vrijednost svojstva spremnika prelijevanje jednak auto ili skriven, preglednik će ponovno izgraditi spremnik na takav način da stane u sve plutajuće blokove i da ne prikazuje trake za pomicanje.
Ako svojstvo overflow postavite na automatska vrijednost, tada budite spremni na činjenicu da se trake za pomicanje ipak mogu pojaviti u nekim situacijama. Stoga biste trebali temeljito provjeriti izgled u različitim načinima rada.
Primjer CSS koda:
Spremnik ( display: block; overflow: auto; ) .in_block ( display: block; float: lijevo; širina: 100px; visina: 100px; margin-desno: 10px; )
Dva bloka na istoj razini s navedenim CSS svojstvima lebde lijevo i lebde desno
Tipična situacija: tekst koji obavija dva bloka s nekim sadržajem. U ovom slučaju, blokovi se nalaze na stranama teksta.
Trebalo bi biti:
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 drugog 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 programeru da uključi stupce nalik tablici HTML označavanje bez korištenja tablica. Ako ne zbog imovine plutati, zatim sheme CSS položaj ne bi bilo moguće osim korištenja apsolutnog i relativnog pozicioniranja - što bi bilo aljkavo i učinilo shemu izgleda neodrživom.
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 ćemo pokazati nekoliko praktične aplikacije 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 vidite svaki dan u tiskanoj literaturi, gdje fotografije i drugo grafički elementi, poravnati na bilo koju stranu, a sadržaj (obično tekst) prirodno teče oko elementa poravnatog oko lijevog ili desnog ruba.
Gornja slika prikazuje odjeljak “Čitatelji” na stranici .net časopisa 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 ništa ili izvorno značenje lebdjeti za neke HTML element-pages je zadana postavka. Značenje riječi naslijediti(inherit) koji se može primijeniti na gotovo svako CSS svojstvo, ne radi u verzijama Internet Explorer, 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. Dostupan je i plutajući blok parametri margine da ga odmakne od odlomka, č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
Jedan od naj zajedničke značajke markup s float je "drop-out-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.
Sada se spremnik širi da stane sve dječji elementi. No, nažalost, ovaj će popravak funkcionirati samo u ograničen broj slučajeva, budući da plutajući roditelj može imati neželjene posljedice za vaš raspored.
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 napuhan 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 vjerojatno najbolji koji smo dosad pogledali.
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.
Dakle, to zapravo nije jednostavno rješenje za više preglednika ovaj problem. 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 raspravljaju uobičajene pogreške vezano za plovak CSS oznake. 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
