Što je float vrijednost u CS:GO? Sve o svojstvu float stupca, izgled jednake visine

Svi elementi koji se pojavljuju na HTML stranici nisu ništa više od pravokutnika. I u osnovi samo dvije vrste:

1. blok (blok), koji zauzimaju svu širinu gdje se nalaze, a odijeljeni su od onoga što je iznad i ispod njih. Na primjer, to su oznake DIV, P, H.
2. ugrađeni (inline). Na primjer, SPAN, STRONG, EM, A i IMG.

stolovi.

Uloga svojstva se povećala nakon prijelaza s rasporeda tablice na raspored div. To je zato što float omogućuje web programeru da uključi stupce bez potrebe za korištenjem tablice. Može poprimiti vrijednosti pravo, lijevo, ali ne centar.

Korištenje prikaza: svojstvo bloka; ili prikaz: inline; pretvaramo jednu vrstu pravokutnika u drugu. Na primjer, UL popis koji ima niz LI blokova može se postaviti vodoravno:

• STAVAK
• STAVAK
• STAVAK

• STAVAK
• STAVAK
• STAVAK

Kada se koristi svojstvo float, pravokutnik je u obliku bloka, ali s posebnom značajkom: njegova širina neće se protezati na cijeli sadržaj. Na primjer, h3 zaglavlje izgleda ovako:

ovo je ZAGLAVLJE h3

ovo je ZAGLAVLJE h3

ovo je ZAGLAVLJE h3

ovo je ZAGLAVLJE h3

Gornji tekst ostaje nepromijenjen jer plutajući element ne može biti postavljen iznad linije na kojoj je kreiran.

ovo je ZAGLAVLJE h3

Ali crveni tekst nalazi se ispod naslova i obavit će ga bez ikakvih dodatnih stilova. I samo će visina h3 biti prevladana, stranica će se vratiti u svoj prirodni poredak.

A B C D Nekoliko plutajućih elemenata pratit će redoslijed svog položaja.

ABUG tekst...

A B C D Ako hodamo tako da strujanje oko elementa prestane od određenog trenutka (odavde), primjenjuje se svojstvo jasno. Možemo ga dodati praznoj oznaci

Da bismo ravnomjerno postavili nekoliko blok pravokutnika, dajemo im istu širinu.

Tablični izgled je vrlo zgodan i razumljiv, što je vjerojatno razlog zašto se pojavio njegov analogni prikaz: tablica; Isti oblik se dobiva s manje koda.

Sada možete vidjeti kako je izgrađena galerija slika. Nadam se da nitko nije zaboravio.

tekst...

tekst...

Float je CSS svojstvo za pozicioniranje elemenata. Kako biste razumjeli njegovu svrhu i podrijetlo, možete se obratiti dizajnu tiska. U izgledu ispisa, slike se mogu postaviti na stranicu tako da tekst "teče" oko njih. To se obično naziva "prelamanje teksta".

U programima za izradu stranica, elementi s tekstom mogu uzeti u obzir slike, ali ih i zanemariti. Ako ih se zanemari, tekst će se pojaviti iznad slika kao da ih nema. Ovo je glavna razlika između toga jesu li slike dio glavnog toka stranice ili ne. Web dizajn je vrlo sličan.

U web dizajnu, elementi stranice sa postavljenim svojstvom float ponašaju se točno kao slike u ispisu kada tekst "teče" oko njih. Takvi su elementi dio glavnog toka web stranice. Međutim, stvari su drugačije ako elementi koriste apsolutno pozicioniranje. Apsolutno pozicionirani elementi uklanjaju se iz glavnog tijeka stranice, slično gornjem primjeru gdje pri ispisu tekst zanemaruje slike. Takvi elementi ne utječu na položaj drugih elemenata, dodiruju li se ili ne.

Postavljanje svojstva float funkcionira ovako:

#sidebar ( float: desno; )

Postoje ukupno 4 vrijednosti za svojstvo float. Lijevo i desno koriste se za odgovarajuće smjerove. Ništa (zadano) - osigurava da element neće plutati. I inherit , što kaže da bi ponašanje trebalo biti isto kao nadređeni element.

Za što se može koristiti plovak?

Osim omatanja teksta oko slika, float se može koristiti za stvaranje izgleda cijele stranice.

Svojstvo float također je korisno u manjoj mjeri. Na primjer, razmislite o malom području na web stranici. Recimo da koristite float za svoj avatar, kada promijenite veličinu slike, veličina teksta će se prilagoditi da odgovara slici.

Isti raspored objekata može se postići korištenjem pozicioniranja. Objektu spremnika dodijeljeno je relativno pozicioniranje, a objektu slike dodijeljeno je apsolutno pozicioniranje. U tom slučaju avatar neće utjecati na položaj teksta.

Onemogućavanje svojstva float

Za float, povezano svojstvo je jasno. Bilo koji element koji ima postavljeno svojstvo clear neće biti pomaknut na vrh kako se očekuje, već će se pojaviti ispod float elemenata. Možda će primjer na slici bolje objasniti od riječi.

U primjeru, bočna traka lebdi udesno (float: right;), a njena je visina manja od područja glavnog sadržaja. Stoga će podnožje biti podignuto više jer ima dovoljnu visinu i ponašanje plutanja to zahtijeva. Da bi popravio situaciju, potrebno je postaviti svojstvo clear, koje osigurava da se element prikazuje ispod float elemenata.

#footer ( jasno: oboje; )

Svojstvo clear može imati četiri vrijednosti. Oba, najčešće korištena, koriste se za poništavanje plutanja svakog smjera. Lijevo i desno - koriste se za poništavanje plutanja jednog od smjerova. Ništa - zadano, obično se ne koristi osim ako je potrebno jasno. inherit bi bila peta vrijednost, ali začudo nije podržana u Internet Explorer. Poništavanje samo lijevog ili desnog pomicanja puno je rjeđe, ali svakako ima svoju svrhu.

Veliki kolaps

Još jedna nevjerojatna stvar o svojstvu float je da njegova upotreba može utjecati na roditeljski element. Ako takav element sadrži samo float elemente, onda on doslovno kolabira, odnosno njegova visina je nula. Ovo nije uvijek vidljivo osim ako nadređeni element nema neku vrstu vidljive pozadine.

Ovaj se kolaps čini nelogičnim, ali alternativa je još gora. Razmotrite ovaj primjer:

Ako se blok element na vrhu automatski proširi kako bi prihvatio sve float elemente, završit ćemo s neprirodnim razmakom u tekstu između odlomaka, bez mogućnosti da ga popravimo. Da je tako, naši projektanti bi se mnogo češće žalili na ovakvo ponašanje nego na kolaps.

Stoga je gotovo uvijek potrebno sažimanje kako bi se spriječile poteškoće s rasporedom. Da biste promijenili ovo ponašanje, trebate dodati element za poništavanje float nakon float elemenata, ali prije zatvaranja nadređenog elementa.

Načini otkazivanja float-a

Ako znate da će nakon float elemenata uvijek biti prikazan neki drugi element (na primjer, podnožje), tada samo trebate postaviti svojstvo clear: both; , kao u gornjem primjeru, i nastavite raditi svoje. Ovo je idealno jer ne zahtijeva nikakve hakove ili dodatne elemente. Naravno, nije sve u našem životu tako glatko i postoje trenuci kada ova metoda nije dovoljna. Stoga je potrebno imati nekoliko dodatne načine u vašem arsenalu.

• Metoda praznog diva. Koristi se doslovno prazan div.
  . Ponekad se element može koristiti umjesto njega
  ili bilo što, ali div se najčešće koristi jer prema zadanim postavkama nema stil, nikakvu posebnu svrhu i malo je vjerojatno da će na njega biti primijenjen opći stil putem CSS-a. Obožavateljima semantički čistog označavanja možda se neće svidjeti ova metoda, budući da prisutnost praznog diva nema kontekstualno značenje i postavlja se na stranicu samo iz dizajnerskih razloga. Naravno da su, strogo gledano, u pravu, ali on radi svoj posao i nikome ne nanosi štetu.
• Metoda prelijevanja. Na temelju činjenice da nadređeni element treba postaviti svojstvo preljeva. Ako je ovo svojstvo postavljeno na auto ili hidden, nadređeni element će se proširiti kako bi prihvatio sve float elemente. Ova metoda izgleda semantički ispravnije jer ne zahtijeva dodatne elemente. Međutim, ako biste koristili drugi div samo za korištenje ovog pristupa (što znači nadređeni div), tada bi to bilo isto kao u prethodnom primjeru s dodavanjem praznog diva. Također zapamtite da svojstvo overflow ima drugu svrhu. Budite oprezni i nemojte dopustiti da dio vašeg sadržaja nestane ili da se pojave nepotrebne trake za pomicanje.
• Jednostavan način čišćenja. Ova metoda koristi prekrasan pseudo CSS birač- :poslije. Puno bolje od korištenja preljeva na nadređenom elementu. Jednostavno mu date dodatnu klasu, deklariranu ovako: .clearfix:after ( content: "."; visibility: hidden; display: block; height: 0; clear: both; ) Ova metoda dodaje nevidljivi sadržaj i poništava float I usput, ovo nije cijela priča o tome kako dodatni kod treba koristiti u starijim preglednicima.

I, kao što razumijete, svaka se metoda koristi u različitim situacijama. Uzmimo, na primjer, mrežu blok elemenata različitih vrsta.

Za bolje vizualni prikaz Bilo bi lijepo kombinirati slične blokove. Na primjer, želimo da svaki tip počinje u novom retku, u našem slučaju tip elementa je određen bojom. Možemo koristiti metodu preljeva ili "metodu jednostavnog čišćenja" ako svaka grupa ima svoj vlastiti element spremnika. Ili možemo koristiti metodu praznog div između svake grupe. Tri elementa spremnika ili tri prazna diva, što je bolje za vaš zadatak, ovisi o vama.

Problemi s plovcima

Ljudi često pokušavaju zaobići Floats jer s njima treba raditi vrlo pažljivo. Većina grešaka došla je s IE6. Kako sve više i više web dizajnera prestaje podržavati IE6, možda nećete biti zabrinuti zbog ovih problema. Ali za one kojima je stalo, evo kratkog popisa.

Alternative za plutanje

Ako vam je potreban tekst za omotavanje slike, nema alternative. Ali za izgled stranice definitivno ima izbora. Postoje neki vrlo zanimljivi pristupi koji kombiniraju fleksibilnost float-a sa snagom apsolutnog pozicioniranja. CSS3 ima nešto što se zove Modul izgleda predloška, koji će u budućnosti pružiti dostojnu alternativu plutanju.

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, 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 ć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 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 č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; )

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 funkcionirao, 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; )

Značajke plutajućih elemenata

Slijedi popis ponašanja plutajućih elemenata, prema CSS2 specifikaciji:

Blok koji lebdi ulijevo lebdit će 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; )

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 rasporedom s plovcima obično se rješavaju koristeći CSS svojstvo clear, koje vam omogućuje da "uklonite" plutajuće elemente s lijeve ili desne ili obje strane.

Pogledajmo primjer koji se često pojavljuje - podnožje se okreće desna strana 2-klonska oznaka:

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; )

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.

Sada se spremnik širi da stane sve dječji elementi. No, nažalost, ovaj će popravak funkcionirati samo u ograničenom broju slučajeva, jer 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.

Kao rezultat toga, CSS se primjenjuje na nove elemente:

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

:after pseudo-element dodaje element dovršenom HTML stranica. 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; )

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; )

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 stiliziranje 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; )

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 koji se odnosi na float u CSS označavanju. 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

kako bi se promijenio CSS vrijednost u JavaScriptu, morate pristupiti stilu objekta transformiranjem ž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 raspravljali 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