CSS Float: opis, svojstva

Float - jedna od osnovnih funkcija jezika CSS (Cascading Style Sheets)

Također, razvojni programeri mogu koristiti više prikladnih opcija oblikovanja, kao što je Flexbox ili Position za promjenu mjesta elementa na web mjestu, ali sve o redu. Prvo, trebate razumjeti prednosti i nedostatke Float svojstva.

CSS Float - zašto je to potrebno?

Float je svojstvo elemenata za pozicioniranje. Svakodnevno se može vidjeti na stranicama novina i časopisa, gledajući slike i tekst koji ih vrlo pažljivo oblače. U svijetu kodova HTML i CSS pri korištenju funkcije Float trebao bi se dogoditi isto. No, vrijedno je zapamtiti da uređivanje slika nije uvijek glavna svrha ove funkcije. Može se koristiti za stvaranje popularnog izgleda elemenata web-lokacije u dva, tri, četiri stupca. Zapravo, Float CSS svojstvo primjenjuje se na skoro svaki HTML element. Poznavanje osnova uređivanja izgleda elemenata pomoću funkcije Float, a zatim Property, stvaranje bilo kojeg dizajna web stranica neće biti teško.

Posebni programi DTP ponekad može ignorirati slike, i da ide preko njih. Dosta slične stvari događaju i prikazuje web dizajn, samo s obzirom na tekst, nego uspon na slici (ako se koristi na pogrešan Float svojstva) pored nje ili ispod njega, ali ne uvijek, gdje vam je potrebna programer.

Opis nekretnine CSS Floata

Zapravo, sposobnost korištenja Float svojstva je vrlo dobar as u rukavu za bilo kojeg web dizajera. No, nažalost, nedostatak razumijevanja funkcije ove funkcije može dovesti do sukoba elemenata web-lokacije i drugih frustracija takve vrste. Prethodno su se slične situacije dogodile zbog pogrešaka u preglednicima. Sada će se otkriti tajna kako pravilno upotrijebiti svojstvo Floata, i više nikakvih problema s tim ne bi trebali nastati.

Imovina Floata ima četiri značenja:

• Float: naslijediti;
• Float: pravo;
• Float: lijevo;
• Float: none;

Za one koji znaju engleski, vrijednosti parametara svojstava Floata moraju biti jasne. Ali za one koji ne znaju, postoji malo objašnjenje. parametar : lijevo; pomiče tijelo elementa na najudaljeniji kut elementa roditelja. Isto se događa (samo u drugom smjeru) s bcgjkmpjdfybb parametrom : pravo;. vrijednost : naslijediti- naredbi elementu da preuzme iste postavke kao i roditelj. Takvi se elementi također nazivaju djeca, budući da se nalaze izravno unutar roditelja u HTML kodu. Nekretnina : nijedan; Omogućuje elementu da ne prekine normalan tijek dokumenta, postavljen je prema zadanim postavkama za sve dijelove koda.

Kako funkcionira Float?

Cava Float CSS radi sasvim jednostavno. Sve što je gore opisano može se učiniti bez puno poteškoća. Onda će sve biti jednako jednostavno. No, prije no što nastavite proučavati svojstva Floata, vrijedi malo razumjeti teoriju. Svaki je element web-lokacije blok. To je lako vidjeti tako da otvorite konzolu u pregledniku Google Chrome pritiskom na Ctrl + Shift + J. Tekst, naslov, slika, veze i svi ostali dijelovi web mjesta prikazat će se u blokovima različitih veličina. U početku, svi ti blokovi idu jedan za drugim. Kao što možete vidjeti u donjem primjeru, linije koda idu jedna za drugom, pa će se one prikazivati ​​strogo jedna za drugom.

To se naziva normalnim protjecanjem. S ovim protokom, svi blokovi leže jedni na druge (bez prelaska tijela elemenata). U početku se cijeli sadržaj web stranice nalazi na ovaj način. No, kada upotrebljavate, na primjer, svojstva jezika CSS Float Left, element ostavlja svoj prirodni položaj na stranici i prelazi u krajnji lijevi položaj. Ovo ponašanje neizbježno dovodi do sudara s onim elementima koji su ostali u normalnom protoku.

Drugim riječima, elementi umjesto da su vertikalno postavljeni sada su jedan do drugog. Ako roditelj element ima dovoljno mjesta za postavljanje dvoje djece u sebe, tada se ne javlja sudar, a ako ne, onda je nametanje jednog objekta na drugu neizbježno. To je izuzetno važno zapamtiti za razumijevanje rada Float CSS imovine.

Očisti funkciju za rješavanje problema

Funkcija Float ima prijatelja srca - Clear. Zajedno su - Nemojte prolijevati vodu. Obje ove funkcije nadopunjuju se i čine programera sretnim. Kao što je gore spomenuto, susjedni elementi izlaze iz normalnog toka i počinju "plivati", poput elementa na koji je primijenjena imovina Float (na primjer, CSS Float Top). Kao rezultat toga, umjesto jednog plutajućeg elementa, dobivaju se dva, a ne uopće na mjestu gdje ih je namijenio razvojni programer. Od ovog trenutka, upravo svi problemi počinju.

Funkcija Clear ima pet vrijednosti:

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

Analogno, možete razumjeti kada je najbolje primijeniti funkciju Clear. Ako imamo zapisanu liniju u kodu Float: pravo; (CSS-kôd je značio), tada bi ta funkcija trebala biti Jasno: pravo-. Ista stvar ima i svojstva i svojstva Float: lijevo; će ga nadopuniti Očisti: lijevo;. Kod pisanja koda Očisti: obje - ispada da se element kojemu se ova funkcija primjenjuje ispod elemenata na koje se primjenjuje funkcija Float. Inherit preuzima postavke iz elementa roditelja, a nitko ne izvršava nikakve promjene u strukturi web mjesta. Ako razumijete kako Float i Clear funkcioniraju, možete napisati jedinstven i neobičan HTML i CSS Float-kôd, koji će vašu web stranicu učiniti nekom vrstom.

Upotreba Floata za stvaranje stupaca

Posebno korisno je svojstvo Float prilikom izrade stupaca na web mjestu (ili postavljanje sadržaja CSS Floata u središte web stranice). Ovo je najkompetentniji i najjednostavniji kod, stoga razmotrite nekoliko mogućnosti za izradu prilagođenog predloška za web stranicu koja se sastoji od dva stupca. Na primjer, uzmite standardnu ​​web stranicu sa sadržajem s lijeve strane, navigacijsku traku (navigacijsku traku) s desne strane, naslov i podnožje. Kôd će biti:

Sada moramo razumjeti ono što je ovdje napisano. Roditeljski element koji sadrži glavni dio HTML koda naziva se kontejner. Omogućuje vam da ne dajete elemente na koje se primjenjuje funkcija Float, da lutaju u različitim smjerovima. Ako nisu, onda bi ovi elementi plivali do samih granica preglednika.

Zatim, u kodu idite #content i #navigation. Za ove elemente primjenjuje se funkcija Float. #content se šalje lijevo, a #navigation ide na desno. To je nužno za stvaranje stranice dvaju stupaca. Morate odrediti širinu tako da se objekti ne preklapaju. Širina se može odrediti u postocima. Tako je još praktičniji nego u pikselima. Na primjer, 45% za #content i 45% za #navigation, i dati preostalih 10% na marginu imovine.

Objekt Clear (Clear), koji se nalazi u #footeru, ne dopušta podnožju da slijedi #navigation i #content, ali ga ostavlja na istom mjestu na kojemu je bio. Što se može dogoditi? ako ne navedete opciju Obriši? U ovom kodu #footer jednostavno će se podići i pojaviti pod #navigacijom. To će se dogoditi zbog činjenice da # navigacija ima dovoljno mjesta za postavljanje još jednog elementa. U ovom ilustrativnom primjeru jasno možete vidjeti kako se svojstva Clear i Float nadopunjuju.

Problemi s kojima se susrećete prilikom pisanja koda

Gornji primjeri su prilično jednostavni. Ali oni također mogu imati problema. Općenito, u stvari, mnoge neočekivane nevolje mogu se dogoditi s funkcijom Float. Međutim, čudno je da se problemi obično ne pojavljuju s CSS-om, ali s HTML kodom. Mjesto na kojem se nalazi element s funkcijom Float u html kodu izravno utječe na rad potonjeg. Kako bi se izbjegle različite vrste poteškoća, najbolje je slijediti jednostavno pravilo - najprije staviti elemente s funkcijom Float u kod. Gotovo uvijek radi i minimizira njihovo neočekivano ponašanje.

Udaranje elemenata

Do sudara se događa kada roditeljski element koji sadrži više djece ne može stati na sve, a međusobno se preklapaju. Čak se i dogodi da elementi ne moraju biti prikazani, ali nestaju s web mjesta. Ovo nije bug preglednika, već očekivano i pravilno ponašanje elemenata s funkcijom Float.

Zbog činjenice da su ti elementi u početku u normalnom tijeku, a potom je kršen pomoću značajke Float, preglednik ih može ukloniti s stranice web mjesta. Međutim, nemojte očajavati jer rješenje je jednostavno i jasno - koristite nekretninu Cear. Moguće je da je Clear najdjelotvornija metoda od svih načina iz ovog problema.

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

• uporaba funkcije Položaj;
• primjena Flexboxa.

Funkcija Pozicija ponekad je dobra alternativa za CSS Float. U središtu web stranice, u slučaju primjene položaja, najbolje je organizirati slike. Ako pravilno primijenite vrijednosti: apsolutni i: relativni, tada će elementi ostati na mjestu i neće se preklapati.

Raspodjela pozicija i plutajućih funkcija

Vrijedi detaljnije razumjeti kako se kôd HTML i zamijenite CSS Float with Position. Zapravo, to je vrlo jednostavno. Pretpostavimo da postoji element #container i #div.

#container {

širina: 40%;

plutaju: lijevo;

margina: 10px;

}

#div {

širina: 40%;

plutajuće: pravo;

margina: 10px;

}

#footer {

jasno: oboje;

}

U ovom primjeru upotreba funkcije Float (CSS Div) u drugom spremniku pomoći će u izradi standardne web stranice dvaju stupaca. Nikad ne zaboravite na funkciju Clear. Bez toga, možete stavljati samo elemente jedan na drugu.

Kako mogu promijeniti CSS i Float kôd za upotrebu usluge Postion? Vrlo je jednostavno:

#container {

širina: 40%;

pozicija: relativna;

margina: 10px;

}

#div {

širina: 40%;

pozicija: relativna;

margina: 10px;

}

U ovom slučaju, #container i #div uzeti će željeni položaj razvojnog programera u elementu roditelja. Glavna stvar? stavite #div i #container u jedan element roditelja koji će odgovarati njihovim veličinama.

Flexbox - kako ova funkcija zamjenjuje CSS Float?

Flexbox je najnapredniji način stvaranja web stranica u ovom trenutku, pa ovu značajku ne podržavaju starije verzije preglednika. Ta se činjenica ne smije odbiti jer korisnici s zastarjelim verzijama preglednika neće moći vidjeti ispravnu verziju web mjesta.

Flexbox nije svojstvo, već poseban modul. Stoga Flexbox podržava niz svojstava koja rade samo s njom. Osim toga, funkcija prikaza, koja ima tri parametra inline, blok i inline-block u flexboxu, ima samo jedan fleksibilni protok.

Kako funkcionira Flexbox?

Ta će tehnologija pomoći razvojnom programeru da lako poravna elemente vodoravno i okomito. Također, Flexbox može promijeniti smjer i redoslijed elemenata. Ova tehnologija ima dvije osi: Glavna osovina i križna osovina, oko kojih se gradi čitav Flexbox. Također uklanja radnje funkcije Float and Clear. On gradi svoj sustav u kodu koji koristi svojstva svojstvena samo njemu pa nažalost ne možete duplicirati druga svojstva u elementima, kao što su Float i Position. A to bi bilo vrlo korisno, jer, kao što je gore spomenuto, Flexbox radi samo u novim verzijama preglednika.

Važno je imati na umu da u konačnici Analiza Flexbox i Float rade isto - izradite neobičan i originalan dizajn za vašu web lokaciju. Svaka opcija navedena u članku to radi na svoj način i stoga ima i prednosti i nedostatke. Osim toga, može se dogoditi da funkcija Float funkcionira dobro (na primjer, na web-mjestu s jednostavnom strukturom), no negdje je bolje koristiti poziciju ili Flexbox.

Dvostruka marginalna greška

Međutim, ponekad, nažalost, svaki razvojni programer ima poteškoće, a ne vezane uz pisani kôd, ali pogreške u određenoj vrsti preglednika. Na primjer, u programu Internet Explorer postoji bug koji se zove Double Margin Bug. Pomnoži parametar Margin za dva, što uzrokuje da se elementi web-lokacije premjeste iz granica preglednika. Da biste to izbjegli, samo odredite Margin parametar u postocima. Taj se problem obično pojavljuje kada je vrijednost margine i plutajuća vrijednost jednaka.

#div {

plutaju: lijevo;

margina-lijevo: 10px;

}

Ovaj kôd premjestit će stavku u Internet Exploreru 20 piksela ulijevo. Ovako možete promijeniti kôd:

#div {

plutaju: lijevo;

margina lijeve: 10%;

}

ili tako,

#div {

plutaju: lijevo;

margina-desno: 10px;

}

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

Greške preglednika i netočan prikaz stranice

Važno je imati na umu da Internet Explorer nije jedini preglednik u kojem se mogu pojaviti bugovi. Stare verzije preglednika Google Chrome i Mozilla također neispravno prikazuju neke elemente modernih web mjesta. Za svaki od tih grešaka možete pronaći rješenje. Općenito, želim napomenuti da će upotreba Floata stvoriti originalan i atraktivan dizajn web mjesta. Razumijevanje osnova i načela ove nekretnine izbjeći će pogreške i olakšati život svakom razvojnom programeru.