CSS Float: opis, svojstva

Float - jedna od osnovnih funkcija CSS jezika(Kaskadne tablice stilova - oblikovanje kaskadnih tablica). Taj jezik postoji od 1996. godine i još se uvijek razvija. Programeri trenutno koriste treću verziju CSS-a. Pomoću programskog jezika CSS moguće je stvoriti vrlo lijepu i ugodnu web stranicu koja se korisniku neće činiti zastarjelom ili neugodnom, čak i ako uopće ne upotrebljavate javascript. Moderne značajke treće verzije omogućuju to.

Također, programeri mogu koristiti višeprikladne opcije oblikovanja, kao što su Flexbox ili Position za promjenu mjesta nekog elementa na web mjestu, ali prije svega. Prvo morate razumjeti prednosti i mane imovine Float.

CSS Float - zašto je potreban?

Float - svojstvo za pozicioniranje elemenata. Svakodnevno se može vidjeti na stranicama novina i časopisa, gledajući slike i tekst koji vrlo uredno teče oko njih. U svijetu kodova HTML i CSS kada se koristi funkcija float bi trebaladogađa se isto. Ali vrijedi zapamtiti da uređivanje slika nije uvijek glavna svrha ove funkcije. Može se koristiti za stvaranje popularnog rasporeda elemenata web mjesta u dva, tri, četiri stupca. U stvari, Float CSS svojstvo odnosi se na gotovo svaki html element. Poznavajući osnove uređivanja izgleda elemenata pomoću funkcije Float i zatim Properties, stvaranje bilo kojeg dizajna web stranica neće biti teško.

Programi posebnog izgleda mogu ponekadne primjećujte slike, ali krenite prema gore. Sasvim slične stvari događaju se i u web dizajnu, samo uzimajući u obzir da se tekst umjesto puzeći na slici prikazuje (ako je svojstvo Float pogrešno primijenjeno) pored ili ispod nje, ali uvijek ne tamo gdje programer treba.

Opis svojstva CSS Float-a

U stvari, sposobnost korištenja imovineFloat je vrlo dobar as za rukave bilo kojeg web dizajnera. Ali, nažalost, nerazumijevanje kako ova funkcija funkcionira može dovesti do sudara elemenata web lokacije i drugih razočaranja ove vrste. Prije toga, slične situacije su se događale i zbog grešaka u preglednicima. Sada će se otkriti tajna kako pravilno koristiti svojstvo Float i s tim se više ne bi trebali pojaviti problemi.

Svojstvo Float ima četiri vrijednosti:

• Float: naslijediti;
• Float: desno;
• Plovec: lijevo;
• Float: nijedan;

Za one koji znaju engleski, vrijednosti parametara svojstva Float trebaju biti jasne. Ali za one koji to ne znaju, može se dati malo objašnjenje. parametar : lijevo; pomiče tijelo elementa u krajnji lijevi kut roditeljskog elementa. Ista stvar se događa (samo u suprotnom smjeru) s parametrom bcgjkmpjdfybb : pravo;, vrijednost : naslijediti; naređuje da element preuzme istopostavke kao roditelj. Takvi se elementi nazivaju i djeci, jer se u html kodu nalaze izravno unutar roditelja. Vlasništvo : nijedan; dopušta elementu da ne ometa normalan tijek dokumenta, zadana je postavljena za sve dijelove koda.

Kako pluta?

Float CSS svojstvo funkcionira prilično jednostavno. Sve što je gore opisano može se učiniti bez većih poteškoća. Tada će sve biti jednako jednostavno. Ali prije nastavka proučavanja svojstava Floata, vrijedno je malo razumjeti teoriju. Svaki element web stranice je blok. To je lako provjeriti otvaranjem konzole u pregledniku Google Chrome pritiskom na Ctrl + Shift + J. Tekst, naslov, slika, poveznice i sve ostale komponente web mjesta prikazat će se u blokovima jednostavno različitih veličina. U početku svi ti blokovi idu jedan za drugim. Kao što možete vidjeti u primjeru u nastavku, linije koda idu jedna za drugom, stoga će biti prikazane strogo jedna za drugom.

To se naziva normalnim protokom. Kod ovog protoka, svi blokovi leže jedan na drugom (bez prelaska elemenata tijela) okomito. U početku se sav sadržaj web stranice nalazi na ovaj način. Ali kad, na primjer, koristi svojstva CSS jezika Float Left, element ostavlja svoj prirodni položaj na stranici i prelazi na krajnji lijevi položaj. Takvo ponašanje neminovno dovodi do sudara s onim elementima koji su ostali u normalnom toku.

Drugim riječima, elementi umjesto togasmještene okomito, sada su jedna pored druge. Ako roditeljski element ima dovoljno prostora da može smjestiti dvoje djece u sebe, tada ne dolazi do sudara, ako ne, tada je preklapanje jednog predmeta na drugi neizbježno. To je izuzetno važno zapamtiti kako biste razumjeli kako svojstvo CSS Float funkcionira.

Jasna funkcija za rješavanje problema

Funkcija Float ima prijatelja srca - Clear. Zajedno ne prosipaju vodu. Obje se ove funkcije međusobno nadopunjuju i čine razvojnog programera sretnim. Kao što je gore spomenuto, susjedni elementi izlaze iz svog normalnog toka i također počinju „plutati“, poput elementa na koji je primijenjeno svojstvo Float (na primjer, CSS Float Top). Kao rezultat, umjesto jednog plutajućeg elementa dobivaju se dva i to nikako na mjestu gdje ih je programer namjeravao smjestiti. Od ovog trenutka počinju svi problemi.

Funkcija Clear ima pet vrijednosti:

• : lijevo;
• : pravo;
• : oboje;
• : naslijediti;
• nitko;

Po analogiji možete shvatiti kada je najbolje koristiti funkciju Clear. Ako smo u kod zapisali liniju Float: desno; (CSS kod znači), tada bi funkcija trebala biti Jasno: točno-. Ista stvar se ljulja i svojstva Plovec: lijevo; nadopunit će ga Vedro: lijevo;, Pri pisanju koda Jasno: oboje; ispada da je element na koji se odnosiova će se funkcija nalaziti ispod elemenata na koje se primjenjuje funkcija Float. Inherit preuzima postavke iz nadređenog elementa, a niti jedan ne mijenja strukturu web mjesta. Ako razumijete kako funkcioniraju funkcije Float and Clear, možete napisati jedinstveno i neobično HTML i CSS plutajući kôd čine vašu web lokaciju jedinstvenom.

Koristite Float za stvaranje stupaca

Svojstvo Float posebno je korisno pri stvaranjustupaca na web mjestu (ili u središtu CSS Float sadržaja na web stranici). Takav je kôd najpraktičniji i najpovoljniji, pa je vrijedno razmotriti nekoliko opcija za stvaranje poznatog predloška web mjesta s dva stupca. Na primjer, uzmimo standardnu ​​web stranicu sa sadržajem na lijevoj strani, navigacijsku traku (desno), zaglavlje i podnožje. Kôd će biti ovako:

Sada treba shvatiti što je ovdjepiše se. Roditeljski element, koji sadrži najveći dio html koda, naziva se spremnik. Omogućuje vam da se spriječe rasipanje elemenata na koje se primjenjuje funkcija Float u različitim smjerovima. Da nije bilo njih, ti bi se elementi plutali do samih granica preglednika.

Zatim su u kodu #content i #navigation. Funkcija Float odnosi se na ove elemente. #content ide s lijeve strane, a #navigation ide s desne strane. Ovo je potrebno za stvaranje web stranice s dva stupca. Obavezno odredite širinu kako se predmeti ne preklapaju. Širina se također može odrediti u postocima. Čak je prikladnije nego u pikselima. Na primjer, 45% za #content i 45% za #navigation, a preostalih 10% dodajte svojstvu marže.

Svojstvo Clear, koje se nalazi u #footeru, nijeomogućuje podnožju da slijedi #navigation i #content i ostavlja ga na istom mjestu na kojem je bio. Što bi se moglo dogoditi? osim ako ne odredite svojstvo Izbriši? U ovom kôdu #footer će se jednostavno popeti i završiti pod #navigation. To će se dogoditi jer #navigation ima dovoljno prostora za smještaj drugog elementa. Ovaj ilustrativni primjer vrlo jasno pokazuje kako se svojstva Clear i Float međusobno nadopunjuju.

Kôd za pisanje problema

Gornji primjeri su prilično jednostavni. Ali mogu biti problema s njima. Općenito, u stvari, s funkcijom Float mogu se dogoditi mnoge neočekivane nevolje. Koliko god se činilo čudnim, problemi obično nastaju ne sa CSS-om, već s html kodom. Mjesto gdje se element s funkcijom Float nalazi u html kodu izravno utječe na rad potonjeg. Da biste izbjegli razne poteškoće, najbolje je slijediti jednostavno pravilo - da u kôd prvo stavite elemente s funkcijom Float. Gotovo uvijek to djeluje i minimizira njihovo neočekivano ponašanje.

Sudar elemenata

Do sudara dolazi kada roditeljelement koji sadrži nekoliko djece ne može ih sve sadržavati i preklapaju se jedno s drugim. Čak se događa da se elementi možda ne prikazuju, ali nestanu sa web mjesta. Ovo nije bug preglednika, već očekivano i pravilno ponašanje elemenata s funkcijom Float.

Zbog činjenice da su ti elementi prvi unormalan protok, a onda ga krši svojstvo Float, preglednik ih može ukloniti sa stranice web mjesta. Ipak, ne očajavajte, jer je rješenje jednostavno i jasno - koristite svojstvo Cear. Moguće je da je od svih načina da se riješi ovaj problem najučinkovitija.

Ali problem sudara elemenata web stranica može se riješiti na drugi način. Postoje barem dva načina:

• pomoću funkcije Položaj;
• Aplikacija Flexbox.

Funkcija položaja je ponekad dobra.alternativa CSS floatu. U središtu web stranice, kad upotrebljavate Položaj, najbolje je postaviti slike. Ako ispravno primijenite vrijednosti: apsolutna i: relativna, elementi će sjesti na svoje mjesto i neće se preklapati jedan s drugim.

Kôd položaja razdjelnika i funkcija plovka

Vrijedno je detaljnije razumjeti kako u kodu HTML i CSS Float zamijeniti sa položajem. To je zapravo vrlo jednostavno. Pretpostavimo da postoji element #container i #div.

#container {

širina: 40%;

plovak: lijevo;

marža: 10px;

}

#div {

širina: 40%;

plutati: desno;

marža: 10px;

}

#footer {

jasno: oboje;

}

U ovom primjeru upotrijebite u drugomZnačajke spremnika (CSS Div) Float pomaže vam u stvaranju standardnog web mjesta s dva stupca. Nikada ne zaboravite na funkciju Clear. Bez njega ispasti će samo superpozicija elemenata jedan na drugom.

Pa, kako promijeniti CSS i Float kod da biste koristili Postion? Vrlo jednostavno:

#container {

širina: 40%;

položaj: relativan;

marža: 10px;

}

#div {

širina: 40%;

položaj: relativan;

marža: 10px;

}

U tom će slučaju #container i #div prihvatitipoložaj programera u nadređenom elementu. Glavna stvar? stavite #div i #container u jedan roditeljski element koji će odgovarati njihovim veličinama.

Flexbox - kako ova značajka pomaže zamijeniti CSS Float?

Flexbox je najnapredniji način stvaranjaweb stranice, tako da ovu značajku ne podržavaju starije verzije preglednika. Ovu činjenicu ne treba odbacivati, jer korisnici sa zastarjelim verzijama preglednika neće moći vidjeti ispravnu verziju web mjesta.

Flexbox nije vlasništvo, već zasebnomodul. Stoga flexbox podržava mnoštvo svojstava koja rade samo s njim. Pored toga, funkcija zaslona, ​​koja ima tri parametra, redni, blok i linijski blok u flexboxu, ima samo jedan fleks protok.

Kako funkcionira flexbox?

Ova će tehnologija lako pomoći programeru.poravnajte elemente vodoravno i okomito. Flexbox također može promijeniti smjer i redoslijed prikaza predmeta. Ova tehnologija ima dvije osi: glavnu i poprečnu os, oko koje je izgrađen cijeli Flexbox. Također uklanja učinak funkcija Float and Clear. Svoj sustav gradi u kodu u kojem koristi svojstva jedinstvena samo za njega, stoga, nažalost, neće moći duplicirati druga svojstva u elementima, kao što su Float i Position. I to bi bilo vrlo korisno jer, kao što je već spomenuto, Flexbox djeluje samo u novijim verzijama preglednika.

Vrijedi zapamtiti taj položaj,Flexbox i Float čine isto - stvaraju neobičan i originalan dizajn za vašu web lokaciju. Svaka od ponuđenih opcija u članku to čini na svoj način i stoga ima i prednosti i nedostatke. Pored toga, događa se da je negdje funkcija Float savršena (na primjer, na web mjestu s jednostavnom strukturom), ali negdje je bolje koristiti Position ili Flexbox.

Greška s dvostrukom maržom

Međutim, ponekad, nažalost, sviProgramer ima problema koji nisu povezani s pisanim kodom, već s pogreškama u određenom obliku preglednika. Na primjer, u programu Internet Explorer postoji greška zvana Double Margin Bug. Umnožava Margin parametar na dva, što dovodi do pomicanja elemenata web stranice izvan granica preglednika. Da biste to izbjegli, samo odredite margin parametar u postocima. Obično se ovaj bug pojavljuje kada su vrijednosti svojstava Margin i Float iste.

#div {

plovak: lijevo;

margina-lijevo: 10px;

}

Takav kôd pomakne element u programu Internet Explorer za 20 px ulijevo. Možete promijeniti kod ovako:

#div {

plovak: lijevo;

margina-lijevo: 10%;

}

ili tako

#div {

plovak: lijevo;

margina-desno: 10px;

}

Obje ove opcije riješit će problem pomicanja elemenata.

Greške preglednika i neispravan prikaz web mjesta

Vrijedi zapamtiti da Internet Explorer to nijejedini preglednik u kojem se mogu pojaviti pogreške. Starije verzije preglednika Google Chrome i Mozilla također pogrešno prikazuju neke elemente modernih web stranica. Možete pronaći rješenje za svaku od tih bugova. Općenito, želim napomenuti da će uporaba Floata stvoriti originalan i atraktivan dizajn web mjesta. Razumijevanje osnova i principa ovog svojstva izbjeći će pogreške i olakšati život svakom programeru.