Float je CSS svojstvo za pozicioniranje elemenata. Da bi se razumjela njegova svrha i porijeklo, može se obratiti print dizajnu. U rasporedu štampe, slike se mogu postaviti na stranicu tako da ih tekst "premotava". Ovo se obično naziva "prematanje teksta".
U programima za raspored stranica, elementi sa tekstom mogu, ali ne moraju uključivati slike. Ako se ignorišu, tekst će biti prikazan iznad slika kao da ih nema. Ovo je glavna razlika između toga da li su slike dio glavnog toka stranice ili ne. Web dizajn je vrlo sličan.
U web dizajnu, elementi stranice koji su postavljeni da lebde ponašaju se baš kao slike u štampi kada se tekst omota oko njih. Takvi elementi su dio glavnog toka web stranice. Međutim, stvari su drugačije ako elementi koriste apsolutno pozicioniranje. Apsolutno pozicionirani elementi se uklanjaju iz glavnog toka stranice, slično kao u gornjem primjeru gdje tekst zanemaruje slike u tipografiji. Takvi elementi ne utiču na položaj drugih elemenata, bez obzira da li se dodiruju ili ne.
Postavljanje svojstva float je kako slijedi:
#sidebar (float: desno; )
Postoje 4 vrijednosti ukupno za svojstvo float. Lijevo i desno se koriste za odgovarajuće smjerove. Ništa (podrazumevano) - osigurava da element neće "plutati". I naslijedite , što kaže da bi ponašanje trebalo biti isto kao i roditeljski element.
Za šta se može koristiti float?
Osim premotavanja teksta oko slika, plutajući se mogu koristiti za kreiranje izgleda cijele stranice.
Svojstvo float je također korisno u manjem obimu. Na primjer, razmislite o malom području na stranici web stranice. Recimo da koristite float za avatar, kada promijenite veličinu slike, tekst će se promijeniti kako bi odgovarao slici.
Isti raspored objekata može se postići korištenjem pozicioniranja. Objektu kontejnera se dodjeljuje relativno (relativno) pozicioniranje, a objektu slike - apsolutno (apsolutno). U ovom slučaju, avatar neće utjecati na poziciju teksta.
Otkazivanje float imovine
Za float, povezano svojstvo je jasno. Bilo koji element koji ima jasan skup svojstava neće biti doveden do vrha kako se očekivalo, već će se pojaviti ispod float elemenata. Možda će primjer na slici objasniti bolje od riječi.
U primjeru, bočna traka je pluta udesno (float: desno;) i njena visina je manja od područja glavnog sadržaja. Dakle, podnožje će biti podignuto više jer ima dovoljno visine i to zahtijeva ponašanje plutanja. Da bi popravio situaciju, on mora postaviti svojstvo clear, koje osigurava da se element prikaže ispod float elemenata.
#footer (jasno: oba; ) 
Svojstvo clear može imati četiri vrijednosti. Oba, najčešće korištena, koriste se za poništavanje float svakog od smjerova. Lijevo i desno se koriste za poništavanje plutanja jednog od smjerova. Ništa - podrazumevano, obično se ne koristi, osim kada je potrebno nadjačati vrednost clear . Naslijeđena vrijednost bi bila peta vrijednost, ali začudo nije podržana u Internet Exploreru. Obrnuti samo lijevo ili desno plutanje je mnogo rjeđe, ali svakako ima svoje koristi.
veliki kolaps
Još jedna nevjerovatna stvar u vezi sa svojstvom float je da njegova upotreba može utjecati na roditeljski element. Ako takav element sadrži samo float elemente, onda se doslovno ruši, odnosno njegova visina je nula. Ovo nije uvijek primjetno ako roditeljski element nema postavljenu vidljivu pozadinu.
Takav kolaps izgleda nelogično, ali alternativa je još gora. Razmotrite ovaj primjer:
Ako element na nivou bloka na vrhu automatski naraste da stane na sve float elemente, završit ćemo s neprirodnim prekidom u tekstu između pasusa, bez načina da to popravimo. Da je to slučaj, naši dizajneri bi se mnogo više žalili na ovakvo ponašanje nego na kolaps.
Stoga je sažimanje gotovo uvijek neophodno kako bi se spriječile poteškoće u rasporedu. Da biste promijenili ovo ponašanje, morate dodati element koji poništava float nakon float elemenata, ali prije nego što se roditeljski element zatvori.
Načini za poništavanje float-a
Ako znate da će neki drugi element (na primjer, podnožje) uvijek biti prikazan nakon plutajućih elemenata, onda samo trebate podesiti svojstvo jasno: oba; , kao u gornjem primjeru, i idite svojim poslom. Ovo je idealno jer ne zahtijeva nikakve hakove ili dodatke. Naravno, nije sve u našem životu tako glatko i postoje trenuci kada ova metoda nije dovoljna. Stoga je potrebno u svom arsenalu imati nekoliko dodatnih metoda.
- Empty div metoda. Koristi, doslovno, prazan div. . Ponekad se element može koristiti umjesto njega
ili nešto drugo, ali div se najčešće koristi jer nema stil prema zadanim postavkama, nema posebnu svrhu i malo je vjerovatno da će na njega biti primijenjen opći CSS stil. Ova metoda se možda neće svidjeti onima koji vole semantički čiste oznake, jer prisustvo praznog div nema kontekstualno značenje i postavlja se na stranicu samo iz razloga dizajna. Naravno, striktno govoreći, u pravu su, ali on radi svoj posao i nikome ne nanosi štetu. - metoda prelivanja. Zasnovano na činjenici da roditeljski element treba postaviti svojstvo overflow. Ako je ovo svojstvo postavljeno na auto ili hidden , tada će se roditeljski element proširiti kako bi sadržavao sve float elemente. Ova metoda izgleda semantički ispravnija jer ne zahtijeva dodatne elemente. Međutim, ako ćete koristiti drugi div samo da biste koristili ovaj pristup (što znači roditeljski div), onda će to biti isto kao i prethodni primjer s dodatkom praznog diva. Također, zapamtite da je svojstvo overflow za druge svrhe. Budite oprezni i ne dozvolite da dio vašeg sadržaja nestane ili da se pojave nepotrebne trake za pomicanje.
- Jednostavna metoda čišćenja. Ova metoda koristi prekrasan :after CSS pseudo selektor. Mnogo bolje od korištenja overflow na roditeljskom elementu. Samo mu date dodatnu klasu, deklarisanu ovako: .clearfix:after (sadržaj: "."; vidljivost: skriveno; prikaz: blok; visina: 0; clear: oba; ) float . Uzgred, ovo nije cijela priča o tome kako treba koristiti dodatni kod u starijim pretraživačima.
I, kao što razumijete, svaka od metoda se koristi u različitim situacijama. Uzmimo, na primjer, mrežu blok elemenata koji se razlikuju po vrstama.
Za bolju vizualnu prezentaciju, bilo bi lijepo kombinirati slične blokove. Na primjer, želimo da svaki tip počinje u novom redu, u našem slučaju tip elementa je određen bojom. Možemo koristiti metodu prelijevanja ili metodu "jednostavnog čišćenja" ako svaka grupa ima svoj vlastiti element kontejnera. Ili možemo koristiti praznu div metodu između svake grupe. Tri elementa kontejnera, ili tri prazna diva, na vama je šta je najbolje za vaš zadatak.
Problemi sa plovcima
Ljudi često pokušavaju zaobići Float, jer s njima morate raditi vrlo pažljivo. Većina grešaka dolazi sa IE6. Kako sve više web dizajnera odbija podršku za IE6, možda nećete morati da brinete o ovim problemima. Ali za one kojima je stalo, evo kratke liste.
float alternative
Ako vam je potreban tekst za premotavanje slike, nema alternative. Ali za izgled stranice, definitivno postoji izbor. Postoje vrlo zanimljivi pristupi koji kombinuju fleksibilnost plutača sa snagom apsolutnog pozicioniranja. CSS3 ima nešto što se zove Modul rasporeda predložaka, koji će u budućnosti pružiti pristojnu alternativu float-u.
Određuje na kojoj će se strani element poravnati, s drugim elementima koji se omotavaju oko njega na drugim stranama. Kada je vrijednost svojstva float none , element se prikazuje na stranici kao normalan, dok se dopušta da jedan red prelamajućeg teksta bude na istoj liniji kao i sam element.
kratke informacije
Sintaksa
float: lijevo | desno | nijedan
Notacija
| Opis | Primjer | |
|---|---|---|
| <тип> | Određuje tip vrijednosti. | <размер> |
| A&&B | Vrijednosti se moraju ispisati navedenim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B). | normalno | small-caps |
| A || B | Svaka vrijednost se može koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom. | širina || count |
| Grupne vrijednosti. | [ usev || križ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jedan ili više puta. | <число>+ |
| ? | Navedeni tip, riječ ili grupa su opcioni. | umetnuti? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jedan ili više puta odvojeno zarezima. | <время># |
Vrijednosti
lijevo Poravnava element ulijevo, a svi ostali elementi, poput teksta, premotaju ga udesno. desno Poravnava element udesno, a svi ostali elementi se omotavaju oko njega lijevo. none Prelamanje elemenata nije postavljeno.
Sandbox
Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno bio završen, a večera nije ni pomišljala da počne. I, naravno, užasno mu je bilo drago kada je vidio da Zec vadi šolje i tanjire.
img ( float: (( playgroundValue )) ; )
Primjer
Biheviorizam, koliko god paradoksalno izgledao, prosvjetljuje sublimirani stimulans, na primjer, Richard Bandler je koristio promjenu submodaliteta za izgradnju efikasnih stanja.
Rezultat ovog primjera prikazan je na sl. jedan.
Rice. 1. Korištenje svojstva float
Objektni model
Objekt.style.cssFloat
Bilješka
Internet Explorer 6 ima grešku sa udvostručavanjem vrednosti levog ili desnog dopuna za plutajuće elemente ugnežđene unutar nadređenih elemenata. Ispuna koja se nalazi uz stranu roditelja je udvostručena. Problem se obično rješava dodavanjem display: inline plutajućem elementu. Ovaj pretraživač takođe dodaje 3px padding (tzv. "tripiksela greška") u smeru određenom float vrednošću.
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobrenja.
- Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
- Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
- Radni nacrt – zreliji nacrt nakon rasprave i amandmana za reviziju zajednice.
- Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
- nacrt ( Nacrt specifikacije) je prva verzija verzije standarda.
Pregledači
Pregledači
Sljedeća notacija se koristi u tabeli pretraživača.
CSS svojstvo je detaljno opisano float, date su karakteristike primjene i suptilnosti upotrebe, vrste pozicioniranja HTML elemenata.
Želim napomenuti da za početnike gore navedeno može izgledati zbunjujuće i komplikovano, ali uvjeravam vas da bez poznavanja pravila za renderiranje elemenata od strane pretraživača nećete postati dobar dizajner izgleda. Zato vam savjetujem da budete strpljivi.
Terminologija
Da bismo izbjegli nejasnoće, dogovorimo se o uslovima.
float(plutajući element) - ispod float ili plutajući element u članku znači blok element sa skupom CSS svojstava float — u pravu ili lijevo.
Boks- Termin boxing se odnosi na imaginarni pravougaonik koji obuhvata svaki HTML element oznake. U skladu sa engleskom terminologijom, ovaj imaginarni pravougaonik će se zvati kutija.
Ako nije baš jasno u vezi s boksom, onda vam toplo preporučujem da se detaljnije upoznate s kutijama i njihovim svojstvima, jer. ovaj termin se često koristi u članku, i što je najvažnije, on je osnova svih HTML izgleda.
Bilješka. Dalje u tekstu biće podvučene reči. Stoga želim da obratim posebnu pažnju na određeno svojstvo ili kvalitet elementa.
Vrste pozicioniranja HTML elemenata
Za jasnu prezentaciju navedenog, potrebno je poznavati i osnovne principe prikazivanja elemenata u HTML dokumentima.
Prema w3.org, WEB označavanje koristi tri izgleda za elemente u web dokumentima.
normalan protok U CSS 2.1, normalan tok Web dokumenta uključuje elemente prikazane kao okviri okvira, elemente formatirane kao inline, i relativnu poziciju okvira i inline okvira.
Drugim riječima, normalni tok uključuje regularne elemente rasporeda koji nemaju float, jednak lijevo desno, ili pozicija, jednak apsolutni/fiksni .
float- plutajući element se prvo postavlja u skladu sa pravilima postavljanja u normalnom toku, zatim se uklanja iz ovog toka i pomera u svojoj liniji ulevo ili udesno što je više moguće.
Jasno shvatite sljedeće važno pravilo. Pošto su plutajući elementi izvučeni iz normalnog toka dokumenta, okviri normalnog toka ih ne vide, ali normalni okviri linija toka ih vide i teku oko jedne strane, umetnuti okviri, posebno, uključuju običan tekst blok okvira. To znači da ako blok kutije normalnog protoka ne obraćaju pažnju na prisustvo plutajućih kutija u svom položaju, onda sadržaj ovih kutija (inline elementi) teče oko takvih elemenata.
Apsolutno pozicioniranje- kod apsolutnog pozicioniranja kutija se potpuno uklanja iz normalnog toka (ne utiče na naredne) i postavlja se u odnosu na poziciju svog kontejnera, odnosno elementa u koji je postavljena.
Možete pročitati nešto više o tokovima HTML dokumenata u članku.
Razlike između plutajućih (plutajućih) i pozicioniranih (pozicijskih) elemenata
Na početku, za svaki slučaj, da vas podsjetim koja je razlika između plutanja ( float) i pozicioniran ( pozicija) elementi. Relativno pozicioniran element sa vrijednošću pozicija:relativna ostaje u normalnom toku dokumenta, ali se pomera u odnosu na njegovu poziciju, ostali elementi su nepromenjeni i ostaju tamo gde su bili. Ovo omogućava relativno pozicioniranim elementima da preklapaju svoje okolne elemente na stranici. Ako element ima pozicija:apsolutna; ili pozicija:fiksna;, zatim se uklanja iz normalnog toka i postavlja prema apsolutnim pravilima pozicioniranja.
Plutajući element se uvijek uklanja iz normalnog toka dokumenta i utiče na postavljanje okolnih elemenata.
Hajdemo sada.
Šta je float?
"Float" je jedno od CSS svojstava elementa za označavanje na nivou bloka, zbog čega je HTML element pomaknut do ekstrema, dostupan za postavljanje, lijevo ili desno unutar kontejnera koji sadrži ovaj element. Ako u trenutnom redu kontejnera nema dovoljno prostora da ga smjesti, pomiče se u sljedeći red dok ne stane. Imajte na umu da širina float Element je definisan svojim sadržajem. Ovisno o podešenoj vrijednosti float, inline elementi se mogu omotati oko takvog elementa na nivou bloka duž jedne od njegovih horizontalnih strana.
Nekretnina float može poprimiti sljedeće vrijednosti: nijedan(zadano), lijevo, desno i naslijediti.
Pravila za crtanje plutajućih elemenata
Šta se dešava kada pretraživač naiđe na element koji ima svojstvo float razlicito od nijedan?
Prvo se takva kutija postavlja kao normalni element, zatim se uklanja iz normalnog toka i pomiče na lijevu ili desnu stranu dok ne naiđe na isti float element ili ivica njegovog roditeljskog kontejnera. U slučaju da nema dovoljno preostalog horizontalnog prostora za element, pretraživač ga pomera na sledeći red svog kontejnera.
Ukoliko float element preuzet iz normalnog toka, regularni blok elementi bez postavljenih svojstava float ne znaju za njegovo postojanje i postavljaju se na uobičajen način, svaki na novom redu. Umetnuti elementi za označavanje “vidite” float kutiju i teče oko nje na jednoj od strana u zavisnosti od vrijednosti - lijevo ili u pravu.
Da bih to ilustrovao, daću vam primjer.
Evo šta će prikazati pretraživač.
Demonstracija crtanja float elemenata
A sada da vidimo šta se desilo. Primjer pokazuje 4 bloka, box1 i box2 su prikazani od strane pretraživača po defaultu, tj. u normalnom toku, a unutrašnji elementi imaju float = lijevo. Da bi primjer bio jasniji, dodao sam boju pozadine i padding blokovima. Dakle, kao rezultat toga, zadani blokovi (1. i 4.) su prikazani, kao i obično, svaki na novom redu i zauzimaju cijelu širinu ( pošto je prikazana snimka ekrana oznake, širina okvira je ograničena širinom slike). Plutajuće (2. i 3.) su izvučene iz normalnog toka (tj. 1. i 4. kutije ih ne vide, tako da “normal box2” počinje ispod 1 od početka reda) i pomjerene na lijevu stranu kontejner. I iako normalni blok boksovi ne vide plutajuće kutije, umetnuti okvir posljednjeg okvira (a ovo je njegov tekst) vidi plutajuće kutije i teče oko njih na desnoj strani.
Kao što vidite, sve je u skladu sa gornjim algoritmom crtanja float elementi.
Kako se koriste plovci
Postoje dva glavna načina korištenja imovine float.
Hajde da ih razmotrimo.
Tekst koji se premotava oko slike.
HTML označavanje često koristi slike i bilo koje pravokutne elemente. Svojstvo float se široko koristi kako bi se osiguralo da se tekst nalazi oko njih, a ne sa linijom koja prati ove pravokutnike.
Tekst se prelama oko slike sa float:left
Primjer rasporeda stranice s premotavanjem teksta oko slike.
css
img.alignleft(float: lijevo; margina: 0 10px 10px 0)
U kodu iznad i plutajući element img i omotni tekst su unutar istog kontejnera str.
Imajte na umu da je u CSS stilovima, padding dodat lijevo i desno od plutajućeg elementa. Uobičajena je praksa dodavanje razmaka između slike i okolnog teksta.
Rasporedi sa kolonama
Nekretnina float omogućava da se dva elementa na nivou bloka postavljaju jedan pored drugog umjesto da počnu na novom redu. Ovo svojstvo plutajućih elemenata je vrlo korisno za kreiranje kolona u dokumentu. Da biste dobili izgled sa 2 kolone, samo postavite premotavanje (tj. postavite svojstvo float) na dva DIV-a.
Primjer kreiranja rasporeda s 2 stupca koristeći float.
HTML
‹div id="wrapper"›
‹div id="left-column"›‹div›
‹div id="right-column"›‹/div›
‹/div›
css
#left-column (float: lijevo)
#desna kolona (float: lijevo)
U primjeru, oba unutarnja div-a su ostavljena omotana, što je rezultiralo 2 kolone. Također morate osigurati da ukupna širina dvije unutrašnje kolone (div) ne premašuje širinu roditeljskog okvira, inače će druga kolona skočiti na novu poziciju ispod prve kolone.
Dodavanjem div zaglavlja iznad 2 kolone i div podnožja koristeći svojstvo jasno, dobit ćete jednostavan i lijep raspored u 2 stupca.
I još jedan savjet. Uvijek postavite širinu plutajućeg elementa, ako ga nemate, možete imati nepredviđene posljedice.
Otkazivanje float imovine
Često kada radite sa float ponekad je potrebno da se naknadni elementi za označavanje ne nalaze pored plutajućeg strujnog, već, kao i obično, na sljedećem redu, tj. potrebno je vratiti se na postavljanje elemenata u skladu s normalnim tokom.
To se često postiže korištenjem imovine jasno. Nekretnina jasno preuzima vrijednosti lijevo, desno, oboje, nijedno(podrazumevano), i nasljediti. U praksi se koriste prve 3 vrijednosti, a u velikoj većini slučajeva ćete koristiti jasno: oboje.
Najčešće, možda jasno koristi se za postavljanje div podnožja stranice ispod vaših 2 ili 3 plutajuće kolone.
Budi pazljiv. Kada se koristi nakon plutajućeg elementa u novom polju, pravila s jasno, vraćate ovaj okvir u normalan tok, ali u isto vrijeme i njegovo svojstvo margin-top prestaje da radi. Često se ova situacija ispravlja postavljanjem praznog div sa svojstvom jasno —
. Pošteno radi, treba napomenuti da se takva tehnika smatra tehnički ispravnom, ali ne i semantički ispravnom, jer dokument izgleda prazan div kontejner.Kontejner sa plutajućim elementima
Prva stvar koju treba učiniti kada koristite kontejner za plutajuće elemente je osigurati da je spremnik dovoljno širok da stane elemente jedan pored drugog. Ako postavite svojstvo dva elementa float:levo da kreirate raspored sa 2 kolone, a ukupna širina elemenata je veća od širine kontejnera, tada će jedan od elemenata skočiti na sledeći red. To će se dogoditi zbog činjenice da druga kolona neće imati dovoljno prostora da stane u roditeljski okvir pored 1. kolone. Ispod su brojke koje ilustruju takvu situaciju.
Prethodno je spomenuto da se plutajući elementi uklanjaju iz normalnog toka dokumenta. Ovo dovodi do zanimljivog i zbunjujućeg problema kada svi elementi unutar kontejnera plutaju. Ovo se obično vidi, na primjer, kada div kontejner zaglavlja web stranice sadrži sliku logotipa sa svojstvom float:levo. U zaglavlju također, obično koristeći svojstvo pozadinska slika neka pozadinska slika. Ukupno imamo kontejner u normalnom toku, koji sadrži plutajući element i prazan element u normalnom toku, pošto je slika nacrtana u pozadini. Problem je u tome što div zaglavlja sadrži jedini neprazan element, plutajuću sliku logotipa koja je ispala iz normalnog toka. Dakle, pretraživač smatra da je div zaglavlja prazan i postavlja njegovu visinu na nulu. Često se kaže da se kontejner srušio. Postoji nekoliko načina za rješavanje ovog problema. Možete eksplicitno postaviti visinu kontejnera div da ne bude manja od visine slike. Ovo će dobro funkcionirati za zaglavlje kao što je gornji primjer, ali to nije uvijek moguće iz više razloga. Ponekad dodaju prazan div sa skupom svojstava jasno tako da sljedeći elementi ne plutaju.
HTML
‹div class="clear"›‹/div›
css
.clear ( clear:oba; )
Ovo je korisno ako je prihvatljivo imati malo razmaka nakon plutajućih elemenata, npr neki pretraživači za prazne divove mogu zadano postaviti konačne vrijednosti za visina, margina, padding itd.
Postoji i način korištenja imovine overflow u roditeljskom elementu. Obično koriste prelivanje: skriveno, ali ovisno o situaciji možete koristiti preliv: auto ili overflow-y umjesto korištenja ovog svojstva u oba smjera. Korištenje imovine overflowštiti roditeljski kontejner od kolapsa.
Problemi sa plovcima
Pored problema sa urušavanjem kontejnera, svojstvo float ima niz drugih problema.
Starije verzije Internet Explorera imaju grešku sa dvostrukim uvlačenjem ( margina). Ako su elementi omotani u istom smjeru i elementi se također dodaju margina u istom smjeru (lijevo/lijevo ili desno/desno), IE udvostručuje vrijednost margina. Jednostavno rješenje je postavljanje svojstva displej: inline za plutajući element, usput, ovo svojstvo pomaže da se riješite drugih buba štetnog magarca. Također, možete koristiti uslovne komentare za postavljanje specifičnih margina za IE ili za pojedinačne verzije IE.
Drugi problem je dodavanje elemenata unutar plutajućeg elementa, a širina dodatih elemenata je veća od širine kontejnera. Možete, na primjer, dodati sliku unutar plutajućeg elementa, pri čemu je širina slike veća od širine kontejnera. Ovisno o pretraživaču, ovo može uzrokovati da vaš plutajući element bude širi od predviđenog ili da se sadržaj preklapa s vašom slikom. Vodite računa da elementi unutar plutajućeg elementa ne prelaze širinu plivajućeg elementa.
Tu je i problem nedostatka donjeg paddinga ( margin-bottom). Donji padding plutajućeg elementa unutar drugih plutajućih elemenata može se zanemariti. Rješenje je korištenje padding umjesto margina ako se to dogodi.
float totals
Kada uče CSS, početnici gravitiraju apsolutnom i relativnom pozicioniranju jer im se čini da je lakše. Ali obično je najbolja praksa koristiti float. Ako se sjetite nekoliko ključnih tačaka, bit ćete dobro svjesni plutajućih elemenata u svom rasporedu i upravljati njima.
- Plutajući elementi se postavljaju u normalnom toku dokumenta, zatim lebde lijevo ili desno unutar nadređenog elementa u skladu sa float vrijednosti i uklanjaju se iz normalnog toka dokumenta.
- Oznake sa postavljenim vrijednostima float automatski postaju blok elementi.
- Blok kutije sa ugrađenim float postavljene jedna pored druge sve dok ima dovoljno prostora za njih. Ako u kontejneru nema dovoljno prostora, oni će biti prikazani ispod plutajućih elemenata.
- Širina kutije sa setom svojstava float određena širinom njenog sadržaja. Preporučljivo je postaviti širinu float elemenata prilikom označavanja, inače rezultat može biti nepredvidiv, preporuka se ne odnosi na slike, jer se širina za njih podrazumijeva.
- Plutajući i pozicionirani elementi su različiti i različito se ponašaju. Ne možete koristiti svojstva float i pozicija u jednom elementu.
- Da biste resetirali svojstvo omota za sljedeće elemente, koristite svojstvo CSS jasno.
- float kutija se prikazuje izvan glavnog toka, tako da su elementi na nivou bloka u normalnom toku postavljeni kao da nisu tamo, ali inline kutije tih elemenata prave prostor za plutajući blok.
- Kontejner sa isključivo plutajućim elementima ima nultu visinu, jer float elementi su izvučeni iz normalnog toka, tako da roditelj misli da je prazan. Postoje načini da se nosite s ovim efektom bez dodatnog označavanja, možete se upoznati s njima, na primjer,.
- Za razliku od glavnih elemenata toka, vertikalne granice float kutije se ne spajaju sa granicama susjednih blokova.
- Pronađite rješenja koja vam najbolje odgovaraju za rješavanje problema s ispravnim prikazivanjem float elemenata u Internet Exploreru.
Nadam se da će vam ovo pomoći da razjasnite neku zabunu kada koristite CSS svojstvo. float.
Svojstvo Float je značajna i moćna prednost za web programere koji rade sa HTML-om i CSS-om. S druge strane, može biti prilično frustrirajuće i zbunjujuće ako ne razumijete u potpunosti kako ova funkcija funkcionira.
Prijevod članka CSS Floats 101. Original alistapart.com
Takođe, u prošlosti, zbog prilično gadnih grešaka u pretraživaču, bilo je normalno biti nervozan prilikom korišćenja svojstva float u vašim CSS skupovima pravila. Ali smirimo živce i pokušajmo ublažiti razočarenje. Pokazat ću vam tačno šta svojstvo float radi vašim elementima i kako ga na jednostavan način koristiti.
Svakodnevno vidimo lebde u svijetu štampe kada pogledamo članak u časopisu sa slikom lijevo ili desno i lijepo raspoređenim tekstom oko njega. U HTML/CSS svijetu, tekst će se omotati oko slike ovisno o svojstvu float koje je primijenjeno na tu sliku. Korištenje svojstva float na slici samo je jedan od mnogih primjera. Kao još jedan primjer, sa svojstvom float, možemo učiniti popularni raspored sa dva stupca vrlo lakim. U stvari, svojstvo float možete primijeniti na bilo koji element u vašem HTML-u. Učenjem i razumijevanjem upotrebe svojstva float, zajedno sa svojstvom pozicije, bit ćete udobni i sigurni kada kreirate bilo koji raspored.
float definicija
Počnimo sa definisanjem šta je float.
Float je konvencionalno polje koje se pomiče udesno ili ulijevo duž tekuće linije. Najzanimljivija karakteristika float-a je da sadržaj može teći duž njegove strane. Kada se primeni float: left, sadržaj će se omotati oko kutije niz desnu stranu, a isto tako float: desno će teći niz levu stranu.
Svojstvo float ima 4 vrijednosti koje možemo koristiti: left, right, inheint i none. Svako značenje je prilično jasno. Na primjer, ako float: lijevo na elementu, on će se pomaknuti na krajnju lijevu ivicu svog roditeljskog elementa. I, ako postavite float: desno, tada će se element na sličan način pomaknuti udesno. Vrijednost ihnerit govori elementu da naslijedi svojstvo od svog roditeljskog elementa. I posljednja vrijednost none je zadana vrijednost i kaže da se ne primjenjuje svojstvo float ovom elementu.
#kontejner ( širina: 960px; margina: 0 auto; ) #content ( float: lijevo; širina: 660px; pozadina: #fff; ) #navigacija ( float: desno; širina: 300px; pozadina: #eee; ) #podnožje ( jasno: oba; pozadina: #aaa; padding: 10px; )
Naše #podnožje je zaglavljeno ispod #navigacijskog bloka. Ovo se dogodilo jer ima mjesta za #footer ispod #navigacijskog bloka i ovo je ispravno ponašanje za normalan tok bloka. Ali, ovo apsolutno nije ono što nam treba, zar ne? Pretpostavljam da već vidite odnos između float i clear i razumete kako se oni međusobno nadopunjuju.
Ako imate opsesivno-manični poremećaj poput mene, možda ste primijetili u primjeru F da kolone #content i #navigation imaju različite visine; Postoji nekoliko načina da se to riješi, ali to je izvan okvira ovog članka. Toplo preporučujem čitanje Lažnih stupova Dana Cederholma da naučite kako napraviti blokove iste visine bez obzira na sadržaj unutra.
Prvo lebdi
Do sada smo vidjeli neke prilično jednostavne primjere koji ne stvaraju mnogo glavobolje. Međutim, postoji nekoliko zamki kojih morate biti svjesni kada koristite svojstvo float. Iznenađujuće, jedna od najvećih zamki nije vezana za CSS, već više za HTML. Stavljanje plutajućeg elementa u vaš HTML može imati različite rezultate. Pogledajte primjer H.
Ovdje imamo mali blok koji ima sliku sa svojstvom float:right i tekst koji ga okružuje. Naš CSS izgleda ovako:
#kontejner ( širina: 280px; margina: 0 auto; padding: 10px; pozadina: #aaa; granica: 1px čvrsta #999; ) img ( float: desno; )
Naš roditeljski element #container ima usku širinu i drži naš plutajući element (sliku) unutar svojih granica. Naš HTML kod izgleda ovako:
Ovaj primjer nam daje željeni rezultat, ali što ako uzmemo i preuredimo neke elemente u HTML-u? U primjeru I sam se preselio nakon teksta
Ovo je neki tekst koji se nalazi unutar malog okvira. Koristim ga kao primjer kako postavljanje vaših lebdećih elemenata različitim redoslijedom u vašem HTML-u može utjecati na vaše izglede. Na primjer, pogledajte ovu sjajnu čuvar mjesta za fotografije koja bi trebala biti s desne strane.
Naš rezultat nije onakav kakav smo očekivali. Naša slika se pomerila udesno, ali više nije u gornjem uglu kako želimo, već je pala ispod pasusa; što je još gore, strši sa dna našeg roditeljskog elementa #container. Šta se dešava?
Prvo. Moje pravilo, koje sam pronašao za sebe, je da prvo lebdim elemente. U svom HTML-u, ja skoro uvijek dodajem plutajuće elemente na početak označavanja, i prije svih nepomičućih elemenata s kojima će moji plutajući elementi komunicirati, kao što je paragraf u gornjem primjeru. U većini slučajeva to daje pozitivan rezultat.
Drugo. Razlog zašto se čini da slika viri iz našeg bloka #container na dnu je nešto što se zove kolaps. Hajde da pričamo o kolapsu i rešenjima.
kolaps
Kolapsiranje je kada element koji ima bilo koji broj plutajućih elemenata ne širi svoje granice oko ugniježđenih elemenata, kao što bi bio da ugniježđeni elementi nisu plutajući.
Pokušajmo sada to popraviti pomoću CSS-a umjesto dodavanja dodatnog HTML-a našem dokumentu kao što smo radili prije. Postoji metoda koja omogućava roditeljskom elementu da "primjeni" svojstvo clear nakon svih plutajućih elemenata. Ovo se radi pomoću svojstva overflow CSS sa vrijednošću hidden . Imajte na umu da svojstvo overflow nije namijenjeno za ovu upotrebu i može uzrokovati neke probleme kao što je sakrivanje sadržaja ili pojavljivanje neželjene trake za pomicanje. Za naš primjer, međutim, i dalje ćemo primijeniti svojstvo overflow: hidden na naš roditeljski element #container:
#kontejner (preljev: skriven; širina: 260px; margina: 0 auto; padding: 10px 0 10px 10px; pozadina: #aaa; granica: 1px čvrsta #999; )
I na kraju, Eric Meyer objašnjava treće rješenje ovog problema u svom članku Containing Floats. Prema CSS Spec 2.1:
element sa svojstvom float će proširiti svoje granice na plutajuće elemente koje sadrži.
Dakle, primjenom svojstva float na #container, naš kontejner će sadržavati našu sliku i paragraf, slično metodama opisanim iznad.
Na kraju krajeva, sva ova rješenja čine istu stvar. Oni prisiljavaju roditeljske elemente da razmotre svoje lebdeće elemente u toku. Svaka metoda ima svoje prednosti i korisnost. Morate razumjeti svaki od njih, a zatim primijeniti one koji najbolje odgovaraju vašoj situaciji.
Zaključak
Koristeći svojstvo float, možete značajno poboljšati svoju tehniku rasporeda. Razumijevanje kako ovo svojstvo funkcionira i šta utječe na njegovo ponašanje dat će vam čvrstu osnovu za efikasno korištenje float-a.
U modernom web dizajnu, nekretnina float koristi se u skoro svakom koraku. Ali unatoč takvoj rasprostranjenosti, ne razumiju svi mehanizam plutajućih blokova, njihovo ponašanje i kakve posljedice može imati njihova upotreba.
Šta je "float"?
float to je CSS svojstvo pozicioniranja. Da biste razumjeli njegovu suštinu i porijeklo, morate obratiti pažnju na dizajn štampe. U štampanim rasporedima, slika se može postaviti tako da se tekst omota oko nje. Ovo se obično zove " prelamanje teksta".
U izgledu stranice, blok koji sadrži tekst može se odrediti za korištenje premotavanje teksta oko slike ili zanemarite umotavanje. Zanemarivanje prelamanja teksta omogućit će da riječi teku preko slike kao da je nema. To je razlika da li je slika dio toka na stranici ili ne. U web dizajnu je sve vrlo slično.
U web dizajnu, element sa CSS svojstvom primijenjenim na njega float ponašat će se kao slika sa premotavanjem teksta oko nje u rasporedu za štampanje. Plutajući elementi ostaju dio toka web stranice. Ovo uopšte nije kao apsolutno pozicionirani elementi, koji se uklanjaju iz toka, kao da je u rasporedu štampanja tekstualnom okviru rečeno da ignoriše prelamanje slike. Apsolutno pozicionirani elementi ne utiču na postavljanje drugih elemenata, a ostali elementi ne utiču na njihov položaj.
Postavljanje imovine float za elemente sa CSS-om izgleda ovako:
#sidebar (float: desno; )
Postoje četiri važeće vrijednosti za svojstvo float - lijevo, u pravu, nijedan, nasljediti. Prva dva lijevo i u pravu označavaju smjer lokacije - lijevo i desno, respektivno. Nema- zadana vrijednost, označava da element nije plutajući i nasljediti instrukcije elementu da naslijedi vrijednost svojstva float od roditeljskog elementa.
Za šta se koristi float?
Osim jednostavnog primjera premotavanja teksta oko slike, float može se koristiti za kreiranje web izgleda.
float, također je zgodan za male elemente rasporeda. Na primjer, uzmite ovaj mali isječak web stranice. Ako postavimo svojstvo float za malu sliku avatara, kada se promijeni veličina slike, omot će se promijeniti u skladu s novim dimenzijama slike:
Isti raspored se može implementirati korištenjem relativnog pozicioniranja kontejnera i apsolutnog pozicioniranja avatara i teksta unutar njega. Ali u rasporedu implementiranom na ovaj način, promjena veličine slike neće utjecati na tekstualni blok, jer elementi s apsolutnim pozicioniranjem ne utiču na druge elemente, a drugi elementi ne utiču na njih.
Wrap Reset
Jasno povezana imovina sa imovinom float. Element sa postavljenim svojstvom jasno neće se kretati gore oko elementa sa postavljenim svojstvom float, ali će se kretati prema dolje, zanemarujući tok. I opet, ilustracija koja će sve objasniti bez daljnjeg.
U gornjem primjeru, bočna traka lebdi desno od glavnog bloka sadržaja. "Podnožje" se pomerilo na slobodni prostor ispod bočne trake, teče oko bloka sa glavnim sadržajem. Rješenje ovog problema je postavljanje vrijednosti svojstva clear:both na "podnožje" da bi se "obrisao" omotač oko oba stupca.
#footer (jasno: oba; ) 
Nekretnina jasno ima četiri značenja. Oba koristi se za resetiranje protoka u oba smjera. lijevo i U redu se koriste za poništavanje jednog smjera - lijevo ili desno, respektivno. Nema- zadana vrijednost. Nasljediti može biti peta vrijednost, ali iznenađujuće nije podržana Internet Explorer. Resetiranje samo lijevog ili desnog omotača je prilično rijetko, ali ima praktičnu korist.
veliki kolaps
Jedna stvar za rad float zagonetan je efekat ovog svojstva na roditeljske elemente. Ako roditeljski element ne sadrži elemente osim float elementa, tada se njegova visina doslovno smanjuje. Ovo nije uvijek primjetno, posebno ako roditeljski element nema istaknutu pozadinu, ali je važno to imati na umu.
Ali alternativa takvom kolapsu je još gora. Razmotrite sljedeći scenario:
Ako se gornji blok automatski proširi kako bi primio plutajući element, tada ćemo dobiti prekid u toku teksta između pasusa, bez načina da to popravimo. Da je to slučaj, programeri bi se mnogo više žalili na ovakvo ponašanje plutajućih blokova nego sada na kolaps.
Sažimanje uvijek treba imati na umu kako bi se spriječilo čudno ponašanje rasporeda i problemi s više pretraživača. Ovaj problem možemo riješiti korištenjem jasno nakon plutajućeg elementa u kontejneru, ali prije nego što se kontejner zatvori.
Wrap Undo Techniques
Ako ste u situaciji u kojoj znate gdje će biti sljedeći element, možete koristiti clear:oba i krenuti svojim poslom. Ovo je savršena opcija jer ne zahtijeva nikakve hakove ili dodatke. Ali nažalost, obično ne ide sve kako želimo, a u ovom slučaju možete koristiti sljedeće alate.
Metoda praznog bloka.
To je bukvalno prazan blok.
. Ponekad možete pronaći element
ili bilo koji drugi nasumični element, ali div je najčešći jer nema zadani stil pretraživača, nema posebne funkcije i malo je vjerovatno da će biti u zajedničkom CSS stilu. Ovu metodu odbacuju semantički puristi jer njeno prisustvo nema kontekstualno značenje na stranici i postoji samo zbog izgleda. Naravno, u strogom smislu su u pravu, ali on radi svoj posao i nikome ne nanosi štetu.
metoda prelivanja.
Zasnovano na specifikaciji CSS svojstva overflow za roditeljski element. Ako je ovo svojstvo postavljeno na auto ili skriveno za roditeljski element, proširiće se nakon plutajućeg elementa, efektivno resetujući tok za sledeće elemente. Ova metoda može biti semantički lijepa jer ne zahtijeva dodatne elemente. Međutim, kao što vidite, dodali smo novi div koristiti ovu metodu, koja je ekvivalentna korištenju nesemantičkog praznog bloka i manje fleksibilna. Također treba imati na umu da je nekretnina overflow Nije namijenjeno da isključi protok. Pazite da slučajno ne sakrijete sadržaj ili ne izazovete neželjene trake za pomicanje.
Lagana metoda čišćenja.
Koristi CSS pseudo-selektor (:after) za uklanjanje omotača. Umjesto korištenja imovine overflow za roditeljski element, postavite dodatnu klasu za njega, kao što je "clearfix" i koristite sljedeći CSS stil:
Clearfix:after (sadržaj: "."; vidljivost: skrivena; prikaz: blok; visina: 0; jasno: oba; )
Ovo koristi mali dio sadržaja skriven od pogleda, koji se nalazi iza nadređenog elementa, koji resetuje omotavanje. Ova metoda nije potpuna, jer je treba poboljšati kako bi podržala starije pretraživače.
Različite situacije zahtijevaju različite metode za preokret. Uzmimo mrežu različitih tipova blokova kao primjer.
Za bolju vizualnu uniju sličnih blokova, trebali bismo započeti novu liniju kada se boja promijeni. Možemo koristiti metod prelivanja ili jasnog svjetla ako svaka grupa boja ima roditeljski element. Ili koristite metod praznog bloka između grupa. Tri roditeljske kutije koje prije nisu postojale, ili tri prazne kutije koje prije nisu postojale. Na vama je da odlučite koja je metoda najbolja.
Problemi sa plutajućim elementima
Plutajući elementi se često grde zbog njihove krhkosti. Veliki dio ove krhkosti dolazi od IE6 i njegovih float orijentisane greške. Ali kako sve više programera odbija podršku za IE6, možda nećete razmišljati o tome, ali za one kojima je stalo do kompatibilnosti, evo kratke liste.
Gurnuti dole, je simptom da je element unutar plutajuće kutije širi od lebdeće kutije (obično se to dešava sa slikama). Većina pretraživača će prikazati izbočeni dio iz plutajućeg elementa, ali to neće utjecati na izgled. IE će proširiti plutajuću kutiju i često će to imati drastičan učinak na izgled. Tipičan primjer je slika koja strši iz glavnog bloka sadržaja, gurajući bočnu traku prema dolje.
Brzo rješavanje problema: koristite overflow: skriveno; da se odseče višak.
Greška dvostruke margine je još jedna stvar koju treba imati na umu kada radite sa IE6. Ova greška se izražava u činjenici da ako je polje na istoj strani na kojoj je orijentisano float, polje je udvostručeno. Na primjer:
Ubacit ćemo lijevu marginu 40px., umjesto 20px.
Brzo rješavanje problema: set display: inline za plutajući blok, i ne brinite element će ostati na nivou bloka.
3px Jog. Suština ove greške je da se tekst koji se nalazi pored lebdećeg elementa čudno pomera za tri piksela, kao pod uticajem polja sile koje se nalazi oko lebdećeg elementa. Brzo rješavanje problema: postavite širinu i visinu zahvaćenog teksta.
Pojavljuje se u IE7 Greška donje margine kada je roditeljski element plutajući element, a njegov podređeni unutar njega je također plutajući element. Nadređeni element ignorira donju marginu (margin-bottom ) djeteta. Brzo rješavanje problema: Koristite donju marginu ( padding-bottom ) na roditeljskom elementu, umjesto donje margine ( margin-bottom ) na elementu podređenom.
