Float - jedna od osnovnih funkcija jezika CSS (Cascading Style Sheets - formatiranje kaskadnih tablica). Ovaj jezik postoji od 1996. godine i nastavlja se razvijati. Trenutno programeri već koriste treću verziju CSS-a. S CSS programskim jezikom, u potpunosti je moguće stvoriti lijepu i ugodnu stranicu koja se ne čini zastarjelom ili nezgodnom za korisnika, čak i ako uopće ne koristite javascript. Moderne značajke treće verzije dopuštaju to. Također, programeri mogu koristiti prikladnije opcije oblikovanja, kao što su Flexbox ili Position kako bi promijenili položaj stavke na web-mjestu, ali sve je u redu. Za početak, trebali biste razmotriti prednosti i nedostatke Float svojstava.
CSS Float - Zašto vam je potreban?
Float - svojstvo za elemente za pozicioniranje. Svakodnevno se može vidjeti na stranicama novina i časopisa, gledajući slike i tekst koji ih lagano zaokružuje. U svijetu HTML i CSS kodova, koristeći Float funkciju, isto bi se trebalo dogoditi. No, vrijedi se sjetiti da uređivanje slika nije uvijek glavna svrha ove značajke. Može se koristiti za stvaranje popularnog položaja elemenata stranice u dva, tri, četiri stupca. Zapravo, svojstvo Float CSS-a primjenjuje se na gotovo svaki html element. Poznavajući osnove uređivanja lokacije stavki pomoću programa Float, a zatim i svojstva, stvaranje bilo kojeg dizajna web-lokacije neće biti poseban posao.
Posebni programeri moguponekad ne primjećujete slike i prelazite preko njih. Sasvim slične stvari se događaju u web dizajnu, samo s činjenicom da tekst, umjesto da hvata na prikazanu sliku (ako su Float svojstva pogrešno primijenjena) pored ili ispod njega, ali ne uvijek gdje je programer potreban ,
CSS Float opis nekretnine
U stvari, mogućnost korištenja Float svojstva je vrlo dobar as u rukavu za bilo kojeg web dizajnera. No, nažalost, nedostatak razumijevanja kako ova funkcija funkcionira može dovesti do sukoba s elementima lokacije i drugim frustracijama ove vrste. Ranije su se slične situacije dogodile s bugovima u preglednicima. Sada će se otkriti tajna kako pravilno koristiti Float svojstvo i više se neće pojaviti problem s tim. Svojstvo Float ima četiri vrijednosti:
Float: inherit;
Plutanje: desno;
Plutanje: lijevo;
Float: nema;
Za one koji znaju engleski, vrijednost parametara Float svojstva treba biti jasna. Ali za one koji ne znaju, možete dati malo objašnjenje. Parametar: lijevo; pomiče tijelo elementa u krajnji lijevi kut roditeljskog elementa. Isto se događa (samo s druge strane) s parametrom bcgjkmpjdfybb: desno; , Vrijednost: naslijediti; govori elementu da preuzme iste parametre kao u roditelju. Ti se elementi nazivaju i pridruženi jer se nalaze izravno unutar roditelja u html kodu. Nekretnina: nema; dopušta elementu da ne krši normalni protok dokumenta, postavljen je na zadano za svedijelove koda.
Kako radi Float?
Svojstvo Float CSS radi vrlo jednostavno. Sve što je gore opisano može se obaviti bez mnogo napora. Onda će sve biti jednostavno. Ali prije nego što nastavite proučavati svojstva Floata, vrijedi malo razumjeti teoriju. Svaki element web-lokacije je blok. To je lako vidjeti ako otvorite konzolu u pregledniku Google Chrome pritiskom na Ctrl + Shift + J. Tekst, naslov, slika, veza i svi ostali dijelovi web-lokacije prikazat će se u blokovima različitih veličina. Prvo svi ovi blokovi idu jedan za drugim. Kao što se može vidjeti iz dolje navedenog primjera, linije koda su jedna za drugom, tako da će biti prikazane strogo jedna za drugom.
To se naziva normalnim protokom. Ovim kursom svi blokovi leže jedan na drugom (ne prelazeći tijelo elemenata) okomito. Prvo, cijeli sadržaj web stranice nalazi se na taj način. Ali kada se, primjerice, koriste svojstva jezika CSS Float Left, element napušta svoj prirodni položaj na stranici i pomiče se u krajnji lijevi položaj. Takvo ponašanje neizbježno vodi do sudara s onim elementima koji su ostali u normalnom tijeku. Drugim riječima, elementi umjesto da se nalaze vertikalno, sada su blizu jedan drugome. Ako roditeljski element ima dovoljno prostora da može postaviti dva podružnice unutar sebe, ne dolazi do sudara, a ako ne, onda je neizbježan nametanje jednog objekta na drugi. Iznimno je važno upamtiti da razumijete rad Float CSS svojstva.
Brisanje funkcije zarješavanje problema
Float funkcija je srce jednog - Clear. Zajedno nisu prolivene vode. Obje ove funkcije se međusobno nadopunjuju i čine sretne developera. Kao što je gore navedeno, susjedni elementi izlaze iz svog normalnog toka i također počinju plutati kao element na koji je primijenjeno Floatovo svojstvo (na primjer, CSS Float Top). Kao rezultat toga, umjesto jednog plutajućeg elementa izlaze dva, a ne na mjestu gdje su namjeravali postaviti developera. Od sada, svi problemi tek počinju.
Funkcija Clear ima pet vrijednosti:
: lijevo;
: desno;
: oboje;
: naslijediti;
nema;
Po analogiji, možete razumjeti kada je najbolje primijeniti funkciju Clear. Ako imamo niz napisan u Float: desno; (CSS kod je namijenjen) tada bi funkcija trebala biti Clear: right ;. Isto vrijedi i za svojstva Float: lijevo; dopuniti će biti jasno: lijevo; , Kada pišete kod Obriši: oboje; ispada da će element na koji se ova značajka primjenjuje biti ispod stavki na koje se primjenjuje Float funkcija. Naslijedi preuzima konfiguraciju roditeljskog elementa i nitko ne mijenja strukturu web-mjesta. Ako razumijete kako Float i Clear work, možete napisati jedinstveni i neobični HTML i CSS float kod koji će vašu web stranicu učiniti jedinstvenom u svojoj vrsti.
Korištenje Float-a za izradu stupaca
Značajka Float je osobito korisna pri stvaranju stupaca na web-lokaciji (ili CSS-ovo plutanje na sredini web-stranice). Upravo je ovaj kod najpraktičniji i najprikladniji, pa je vrijedno razmotriti nekoliko mogućnosti za stvaranje uobičajenogpredložak web-lokacije koji se sastoji od dva stupca. Na primjer, uzmimo standardnu web-lokaciju s lijevim sadržajem, navigacijsku traku s desne strane, zaglavlje i podnožje. Kôd će biti:
Sada je potrebno razumjeti što je ovdje napisano. Roditeljski element, koji sadrži većinu html koda, naziva se spremnikom. Omogućuje vam da ne dajete elemente koji se koriste s Float funkcijom, podijeljeni u različitim smjerovima. Da nije, onda bi ti elementi prešli granice samog preglednika. Zatim se #content i #navigation nalaze u kodu. Ovi elementi koriste funkciju Float. #content se šalje lijevo i #navigacija ide desno. To je potrebno za stvaranje stranice s dva stupca. Svakako navedite širinu tako da se objekti ne preklapaju. Širina se također može specificirati u postocima. Dakle, još je prikladnije nego u pikselima. Na primjer, 45% za #content i 45% za #navigation, a preostalih 10% za svojstva povrata povrata. Svojstvo Clear na #footer ne dopušta podnožju da slijedi #navigaciju i #content, ali ostavlja ga na istom mjestu kao što je bilo. Što se može dogoditi? ako ne navedete opciju Očisti? U ovom kodu, #footer se jednostavno pojavi i pojavljuje se pod #navigacijom. To će se dogoditi jer #navigacija ima dovoljno prostora za postavljanje druge stavke. U ovom ilustrativnom primjeru vrlo je jasno kako se svojstva Clear Float nadopunjuju.
Nevolje koje se mogu susresti prilikom pisanja koda
Gore navedeni primjeri su vrlo jednostavni. Ali s njima može biti problema. Općenito,u stvari, mnoge neočekivane poteškoće mogu se pojaviti s Float funkcijom. To ne bi bilo čudno, ali problemi se obično ne javljaju iz CSS-a nego s html kodom. Mjesto na kojem se nalazi stavka s funkcijom Float u html kodu izravno utječe na rad zadnje. Kako bi se izbjegle sve vrste poteškoća, najbolje je pridržavati se jednostavnog pravila - stavljati stavke s funkcijom Float prvo u kod. Gotovo uvijek radi i minimizira njihovo neočekivano ponašanje.
Sudar elemenata
Do sudara dolazi kada roditeljska stavka koja sadrži nekoliko kćeri ne može sve stati i oni se međusobno preklapaju. Čak se događa da se stavke možda neće pojaviti, ali će nestati s web-lokacije. Ovo nije preglednik, već dobro očekivano i ispravno ponašanje elemenata s funkcijom Float. Zbog činjenice da su ti elementi u početku u normalnom tijeku, a onda krši Float svojstvo, preglednik ih može ukloniti sa stranice stranice. Međutim, ne smijete očajavati, jer je rješenje jednostavno i jasno - koristite imovinu Ceara. Moguće je da je Clear najučinkovitiji način da se izađe iz ovog problema. No, problem sudara elemenata web stranice može se riješiti na drugačiji način. Postoje barem dva druga načina:
pomoću funkcije položaja;
Flexbox aplikacija.
Funkcija pozicije je dobra alternativa za CSS Float. U središtu web-stranice, u slučaju položaja, najbolje je organizirati sliku. Ako ispravno primijenite vrijednost: apsolutna: relativna, tada će se stavke popeti na svoje mjesto i nećejedna na drugu.
Analiza funkcije i položaja funkcije Float
Vrijedi detaljnije istražiti kako zamijeniti HTML i CSS Float kod pozicijom. Zapravo, ovo je vrlo jednostavno. Pretpostavimo da postoji element #container i #div. #container {širina: 40%; plutajući: lijevo; margina: 10px; } #div {širina: 40%; float: desno; margina: 10px; } #footer {clear: oboje; }
U ovom primjeru, uporaba druge funkcije kontejnera (CSS Div) Float će pomoći u stvaranju standardnog mjesta s dva stupca. Nikada ne zaboravite funkcije Clear. Bez nje, pojavit će se samo sloj elemenata jedan na drugoga. Dakle, kako mogu promijeniti CSS i Float kod tako da koristim Postion? Vrlo je jednostavno: #container {width: 40%; pozicija: relativna; margina: 10px; } #div {širina: 40%; pozicija: relativna; margina: 10px; } U ovom slučaju, #container i #div će prihvatiti položaj developera u nadređenom elementu. Glavna stvar? stavite #div i #container u jedan roditeljski element koji odgovara njihovoj veličini.
Flexbox - Kako ova značajka pomaže zamijeniti CSS Float?
Flexbox je najnapredniji način stvaranja web-mjesta u ovom trenutku, tako da starije preglednike ova značajka ne podržava. Ovu činjenicu ne treba odbacivati jer korisnici s zastarjelim verzijama preglednika neće moći vidjeti ispravnu verziju web-lokacije. Flexbox nije svojstvo, već zasebni modul. Stoga flexbox podržava niz svojstava koja rade samo s njom. Osim toga, u funkcijskom zaslonu, koji ima tri parametra u redu, blok i inline blok u flexboxu, postoji samo jedan flex-flow.
Kako radi Flexbox? Ova tehnologija pomoći će programerima da jednostavno poravnaju elemente horizontalno i vertikalno. Također, Flexbox može promijeniti smjer i redoslijedprikaz stavki. Ova tehnologija ima dvije osi: Glavnu osi i Križnu os, oko kojih je izgrađen cijeli Flexbox. Također briše funkciju Float i Clear. Sustav gradi u kodu koji koristi samo njegova svojstva, tako da nažalost neće moći duplicirati druga svojstva elemenata, kao što su Float i Position. I to bi bilo vrlo, jer, kao što je već spomenuto, Flexbox radi samo u novim verzijama preglednika.
Važno je zapamtiti da, na kraju, Position, Flexbox i Float čine isto - stvaraju neobičan i originalan dizajn vaše stranice. Svaka opcija u članku to čini na svoj način i stoga ima i prednosti i nedostatke. Štoviše, Float (na primjer, stranica s jednostavnom strukturom) je negdje sjajna i bolje je da koristite negdje stavku Position ili Flexbox.
Bug Double Margin
Međutim, ponekad, nažalost, svaki programer nailazi na probleme koji nisu povezani s pisanim kodom, ali s greškama u određenoj vrsti preglednika. Na primjer, u pregledniku Internet Explorer postoji bug nazvan Bug Margin Double Margin. Parametar Margin pomnoži s dva, što rezultira pomakom elemenata mjesta izvan preglednika. Da biste to izbjegli, dovoljno je specificirati parametar Margin u postocima. Obično se ovaj bug javlja kada su vrijednosti u svojstvima Margin i Float iste. #div {float: lijevo; margin-left: 10px; } Ovaj kôd pomiče stavku u programu Internet Explorer za 20 px ulijevo. Možete promijeniti kôd: #div {float: left; margin-left: 10%; } ili tako, #div {float: left; margin-right: 10px; } Obe ove opcije riješit će problem pomicanja stavki.
Nedostaci preglednika i netočno mapiranje web-lokacije
Vrijedno je zapamtiti da Internet Explorer nije jedini preglednik koji možda ima pogreške. Starije verzije preglednika Google Chrome i Mozilla također pogrešno odražavaju neke elemente modernih web-lokacija. Za svaku od ovih grešaka možete pronaći rješenje. Općenito, želio bih napomenuti da će uporaba Floata stvoriti originalan i atraktivan dizajn stranice. Razumijevanje osnova i načela ove značajke će izbjeći pogreške i olakšati život bilo kojem programeru.
To se naziva normalnim protokom. Ovim kursom svi blokovi leže jedan na drugom (ne prelazeći tijelo elemenata) okomito. Prvo, cijeli sadržaj web stranice nalazi se na taj način. Ali kada se, primjerice, koriste svojstva jezika CSS Float Left, element napušta svoj prirodni položaj na stranici i pomiče se u krajnji lijevi položaj. Takvo ponašanje neizbježno vodi do sudara s onim elementima koji su ostali u normalnom tijeku. Drugim riječima, elementi umjesto da se nalaze vertikalno, sada su blizu jedan drugome. Ako roditeljski element ima dovoljno prostora da može postaviti dva podružnice unutar sebe, ne dolazi do sudara, a ako ne, onda je neizbježan nametanje jednog objekta na drugi. Iznimno je važno upamtiti da razumijete rad Float CSS svojstva.
Važno je zapamtiti da, na kraju, Position, Flexbox i Float čine isto - stvaraju neobičan i originalan dizajn vaše stranice. Svaka opcija u članku to čini na svoj način i stoga ima i prednosti i nedostatke. Štoviše, Float (na primjer, stranica s jednostavnom strukturom) je negdje sjajna i bolje je da koristite negdje stavku Position ili Flexbox.
