CSS Float: opis, svojstva

Float - jedan od osnovnih funkcija jezika CSS (Cascading su se Style Sheets - oblikovanje kaskadno). Ovaj jezik postoji od 1996. godine i dalje nastavlja razvijati. U ovom trenutku, programeri su koristili treću verziju CSS. Sa CSS programski jezik moguće je stvoriti lijep i ugodan site koji se neće pojaviti zastarjele ili neugodno za korisnika, čak i ako nisu koristili JavaScript. Moderni mogućnosti treću verziju dozvole.

Također, programeri mogu koristiti više praktične mogućnosti oblikovanja, kao što je flexbox ili položaj za promjenu element prostora na mjestu, ali krenimo redom. Za početak razumjeti prednosti i mane Float svojstva.

CSS Float - zašto je ona potrebna?

Float - imovine za pozicioniranje elemenata. Svaki dan, što se može vidjeti na stranicama novina i časopisa, gledajući slike i tekst, što je vrlo uredno omotana oko njih. и CSS при использовании функции Float должно произойти то же самое. U svijetu HTML i CSS koda pomoću Float funkciju treba dogoditi isto. Ali, to je vrijedno pamćenja da uređivanje slika nije uvijek glavni cilj ove funkcije. To se može koristiti za stvaranje popularne položaj elemenata stranice u dva, tri, četiri stupca. U stvari, Float CSS svojstvo se koristi za gotovo bilo HTML-element. Znajući osnove uređivanja izgleda elemente pomoću funkcije Float, a zatim imovinu, za stvaranje bilo dizajn stranice 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.

CSS opis Float nekretnine

U stvari, sposobnost da koriste Float imovinu je vrlo dobar adut za bilo koju web dizajner. No, na žalost, nedostatak razumijevanja o tome kako to radi može dovesti do sudara i drugim dijelovima cjeline tuge ove vrste. Ranije je također takve situacije javljaju zbog greške u preglednicima. Sad je tajna kako pravilno koristiti plovak imovinu će biti otvorena i nema problema s njom ne bi trebao biti veći.

Mi Float Objekt ima četiri vrijednosti:

• Float: naslijediti;
• Float: right;
• Float: left;
• Float: none;

Za one koji znaju engleski, vrijednosti parametara Float imovina mora biti jasno. No, za one koji ne znaju, možete donijeti malo objašnjenje. Parametar: left; Ona se kreće tijelo elementa u najekstremnijem lijevom kutu matične elementa. Ista stvar se događa (samo na drugi način), kada bcgjkmpjdfybb parametar: u pravu; , Vrijednost: naslijediti; naređuje elementa preuzimanja istu konfiguraciju kao što roditelja. Takvi elementi se zove dijete i dalje, kao što se nalaze izravno unutar matičnog html-u kodu. Nekretnina: none; To omogućuje element da ne ometaju uobičajeni tijek dokumenta, koji je postavljen po defaultu za sve dijelove koda.

Kako Float posao?

Float CSS svojstvo djeluje prilično jednostavno. Sve što je gore opisano, može biti učinjeno bez većih poteškoća. Nakon toga, sve će biti baš tako lako. No, prije nego što sam i dalje studiranje Float svojstva, vrijedi malo pogled u teoriji. Svaka web stranica je element bloka. Lako je vidjeti otvaranjem konzole u Google Chrome pritiskom na Ctrl + Shift + J. tekst, naslov, slike, linkove i sve ostale komponente stranici će se prikazati blokova, samo različitih veličina. U početku su svi ovi blokovi koji prate jedni druge. Kao što je prikazano u donjem primjeru, kod niza idu jedna za drugom, i tako se čine strogo jedan iza drugoga.

To se zove normalan protok (normalan protok). Kada su svi takvi blokovi pada u drugi (tijelo bez prelaska elemenata) okomito. U početku su svi sadržaji na web stranicama nalazi se na ovaj način. Međutim, kada se koristi, na primjer, svojstva CSS Float lijevi element koji jezik ostavlja svoju prirodnu poziciju na stranici i kreće u lijevo. Takvo ponašanje dovodi do neizbježnog sudara s onim elementima koji su ostali u normalnom tijeku.

Drugim riječima, elementi umjesto pozicionirani okomito, sada su susjedni jedan drugome. Ako roditelj element je dovoljno prostora tako da se može smjestiti dvoje djece unutra, sudar ne dogodi, ali ako ne, nametanje jednog objekta na drugi je neizbježan. Izuzetno je važno imati na umu za razumijevanje svojstava Float CSS.

Vedro funkcija za rješavanje problema

Mi Float ima srce svakog - Clear. Zajedno su - ne prolijete vodu. Obje od tih značajki međusobno nadopunjuju i čine developer sretan. Kao što je gore spomenuto, susjedne stanice odlaze iz svog uobičajenog naravno i početi „plutaju” kao elementa na koji se koristi plovak imovine (primjerice, CSS-Float Top). Kao rezultat toga, umjesto plutajućeg elementa dobiva dva, a ne na mjestu gdje su se trebali dogovoriti programeru. Od tog trenutka je tek početak svih problema.

Na Clear funkcija ima pet vrijednosti:

• : Lijevo;
• : Pravo;
• : I;
• : Naslijediti;
• nitko;

Po analogiji možemo razumjeti kada je najbolje koristiti Clear funkciju. Ako smo napisali liniju u kodnom float: right; (CSS-kod je značilo), funkcija mora biti jasno: zar ;. Ista svojstva stijena i float: left; to će nadopuniti jasan: lijevo; , Prilikom pisanja koda jasna: oba; ispada da je element na koji se primjenjuje, ova značajka će biti ispod elemenata na koje se primjenjuju Float funkciju. Naslijediti traje postavke iz matične elementa, ali nitko ne napraviti nikakve promjene u strukturi stranice. и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде. Ako ste razumjeli kako plutaju i Jasne funkcije, možete pisati jedinstven i neobičan HTML-a i CSS plovak kod, koji će učiniti vaše web stranice jedinstven u svojoj vrsti.

Korištenje Float stvoriti kolone

Float posebno korisna značajka kod izrade stupova na mjestu (ili mjesto sadržaja CSS plutaju u sredini web stranice). To je to kod je najpraktičniji i zgodan, tako da bi trebao uzeti u obzir nekoliko opcija za stvaranje uobičajeni predložak stranice koji se sastoji od dva stupca. Na primjer, uzeti standardni web stranice sa sadržajem na lijevoj navigacijskoj traci (navigacije) u desno, zaglavlja i podnožja. Kôd izgleda ovako:

Sada moramo shvatiti što je ovdje napisano. Roditelj element u kojoj je glavni dio HTML-koda naziva spremnika (spremnik). To vam omogućuje da spriječi elemente, koji se primjenjuje Float funkciju raspršiti u različitim smjerovima. Ako to nije, onda ti elementi su plutali do granica pregledniku.

Zatim, u kodu i otići #Content #navigation. Ovi elementi se koriste Float funkciju. #content poslan na lijevo i na desno je #navigation. Potrebno je stvoriti web-mjesto s dva stupca. Budite sigurni da odredite širinu, tako da se predmeti ne preklapaju jedni druge. Možete odrediti širinu i postotak. Pa čak i ugodnije nego u pikselima. Na primjer, 45% do 45%, a za #Content #navigation, a preostalih 10%, čime se dobije u vlasništvu maržu.

Imovina jasno, koji je u #footer, ne slijedi podnožje #navigation i #Content, ali ga ostavlja na istom mjestu gdje se nalazio. Što se može dogoditi? Ako ne navedete Clear imovinu? U ovom koda #footer jednostavno ići gore i da će biti pod #navigation. To se događa zbog činjenice da #navigation dovoljno prostora za smještaj više od jednog elementa. U ovom ilustrativnog primjera jasno je vidljivo kako su svojstva jasno float i međusobno nadopunjuju.

Problemi na koje možete naići prilikom pisanja koda

Gore navedeni primjeri su jednostavni. No, s njima mogu uzrokovati probleme. Općenito, u stvari, puno neočekivanih problema može dogoditi da plutaju funkciju. Bez obzira koliko čudno, ali problemi se obično ne pojavljuju u CSS i HTML-koda. Mjesto gdje je element s Float funkciju u HTML-koda izravno utječe na konačni rad. Kako bi se izbjegle razne vrste problema, najbolje je držati se jednostavnih pravila - pozicioniranje elemenata Float funkciju prvog koda. Gotovo uvijek se radi i kako bi se smanjila njihova neočekivano ponašanje.

sudar elemenata

Sudar događa kada nadređeni element sadrži višestruke dijete ne može ih sve smjestiti, a oni međusobno preklapaju. To čak se događa da su stavke možda se neće pojaviti, i nestaju s web-mjesta. To nije bug preglednik, a očekuje se i pravilno ponašanje elemenata s Float funkciju.

S obzirom na činjenicu da su ti elementi su u početku u normalnom tijeku, a onda je slomljena Float vlasništvo preglednik ih se može ukloniti sa stranice. Ali ne očajavajte, jer rješenje je jednostavno i jasno - korištenje imovine Cear. Moguće je da je sve načine iz ovog problema, korištenje Clear je najučinkovitije.

No problem kolizije elemenata web-stranica može riješiti na drugi način. Postoje najmanje dva načina:

• Položaj uporabu funkcije;
• Zahtjev flexbox.

Funkcija položaj je često dobra alternativa za CSS pluta. U središtu web stranice u slučaju primjene Pozicija je najbolje pozicionirati sliku. Ako se pravilno primjenjuju vrijednosti: apsolutna i: relativna, elementi pasti na svoje mjesto, i neće međusobno preklapaju.

Analiza položaja i Float kod funkcije

и CSS Float заменить на Position. To bi trebao više baviti načinom na HTML i CSS Float zamijenila pozicije. U stvari, to je vrlo jednostavan. Recimo postoji element #container i #div.

{#container

Širina: 40%;

float: lijevo;

margin: 10px;

}

{#div

Širina: 40%;

float: right;

margin: 10px;

}

{#footer

jasno: oboje;

}

U ovom primjeru, korištenje funkcije u drugoj posudi (CSS Div) Float će pomoći u stvaranju standardnog web dvaju stupaca. Nikad ne zaboravi Clear funkciju. Bez toga će samo prekriti elemenata na vrhu svake druge.

Pa kako se mijenjati CSS i plivajući kôd za korištenje odlomku? Vrlo jednostavno:

{#container

Širina: 40%;

Položaj: relativna;

margin: 10px;

}

{#div

Širina: 40%;

Položaj: relativna;

margin: 10px;

}

U ovom slučaju #container #div i poduzeti potrebne položaj zahvata u osnovnom elementu. Glavna stvar? staviti #div i #container jedan roditelj element, koji će odgovarati njihovoj veličini.

Flexbox - ova funkcija će zamijeniti CSS Float?

Flexbox - najnapredniji način za stvaranje web stranice u ovom trenutku, tako da ova funkcija ne podržava starije verzije preglednika. Ova činjenica ne diskontiraju, za korisnike sa starijim verzijama preglednika neće moći vidjeti ispravnu verziju stranice.

Flexbox nije svojstvo, kao zaseban modul. Stoga flexbox podržava niz svojstava, koji rade samo s njim. Osim toga, funkcija prikaza, koja ima tri parametra u liniji, blok i inline-block u flexbox postoji samo jedan Flex-tok.

Kako flexbox?

Ova tehnologija pomaže programeru da lako uskladiti elemente horizontalno i vertikalno. Flexbox Također možete promijeniti smjer i redoslijed prikaza elemenata. U ovom tehnologijom, postoje dvije osi: Glavna os i poprečna os, oko koje izgradili cijeli flexbox. Također uklanja efekt Float i jasna funkcija. On gradi svoj sustav u kodu, koji koristi jedinstven za svoje imovine, pa, na žalost, neće moći replicirati u stanicama druga svojstva, kao što su Float i položaju. I to će biti vrlo zgodan, jer je, kao što je gore spomenuto, flexbox raditi samo u novijim verzijama preglednika.

Podsjetimo da je u krajnjem položaju, flexbox Float i učiniti istu stvar - stvaraju neobičan i originalan dizajn svoje stranice. Svaka verzija objašnjeno u članku to radi na svoj način, a time i ima i prednosti i nedostatke. Osim toga, događa se da negdje savršen Float funkcija (na primjer, na mjestu s jednostavnim strukture), ali negdje bolje koristiti položaja ili flexbox.

Dvostruka margina Bug

Međutim, ponekad, nažalost, svaki programer problemi proizlaze ne iz pisanog koda, s kvarovima i na neki preglednika određenom obliku. Na primjer, u programu Internet Explorer, postoji bug koji se zove Double margina Bug. On umnožava parametar marža na dva, što je rezultiralo u rasporedu elemenata stranice granice preglednika. Da bi se to izbjeglo, dovoljno je navesti parametar marža postotak. Obično se to bug događa kada je vrijednost y i svojstva margin Float točke.

{#div

float: lijevo;

margin lijevi: 10px;

}

Ovaj kod će se pomaknuti element za Internet Explorer 20 px lijevo. Možete promijeniti kôd na sljedeći način:

{#div

float: lijevo;

margin lijevi: 10%;

}

ili tako

{#div

float: lijevo;

margin-right: 10px;

}

Oba ova opcija će riješiti problem raseljavanja elemenata.

Nedostaci preglednik i netočni prikaz stranica

Vrijedno je zapamtiti da je Internet Explorer - nije jedini preglednik koji se mogu pojaviti greške. Starije verzije Google Chrome i Mozilla i pogrešno prikazati neke elemente modernih web stranica. Za svaku od tih grešaka, možete pronaći rješenje. U principu, mi na umu da korištenje Float će stvoriti originalan i atraktivan web dizajn. Razumijevanje osnove i načela ove nekretnine pomoći će izbjeći pogreške i učiniti život lakšim za bilo koji programer.