CSS Float: Opis, Lastnosti

Float - ena od osnovnih funkcij jezika CSS (Cascading Style Sheets - oblikovanje kaskadnih tabel). Ta jezik obstaja od leta 1996 in se še naprej razvija. Trenutno razvijalci že uporabljajo tretjo različico CSS. S programskim jezikom CSS je popolnoma možno ustvariti lepo in prijetno mesto, ki se ne zdi zastarelo ali neprijetno za uporabnika, tudi če ga sploh ne uporabljate. Sodobne značilnosti tretje različice to omogočajo. Prav tako lahko razvijalci uporabljajo bolj priročne možnosti oblikovanja, kot so Flexbox ali Position, da spremenijo lokacijo elementa na spletnem mestu, vendar je vse v redu. Za začetek si oglejte prednosti in slabosti Float lastnosti.


CSS Float - Zakaj ga potrebujete?

Float - lastnost za pozicioniranje elementov. Vsak dan ga lahko vidimo na straneh časopisov in revij, gledamo slike in besedilo, ki jih nežno obkroža. V svetu kode HTML in CSS, ki uporablja funkcijo Float, se mora zgoditi isto. Vendar je treba spomniti, da urejanje slik ni vedno glavni namen te funkcije. Lahko se uporablja za ustvarjanje priljubljene postavitve elementov spletnega mesta v dveh, treh, štirih stolpcih. Lastnost Float CSS je dejansko uporabljena za skoraj vsak element html. Poznavanje osnov urejanja lokacije elementov z uporabo funkcije Float, nato pa lastnine, ustvarjanje zasnove spletnega mesta ne bo posebno delo.
Posebni programerji lahkovčasih ne opazite podob in jih nadaljujete. Precej podobne stvari se dogajajo v spletnem oblikovanju, le z dejstvom, da besedilo, namesto da ujame na prikazano sliko (če so Float lastnosti nepravilno uporabljene) zraven ali pod njo, vendar ne vedno, kadar jo potrebuje razvijalec. .


CSS Float opis nepremičnine

Pravzaprav je zmožnost uporabe lastnine Float zelo dober as v robu za vse spletne oblikovalce. Na žalost pa pomanjkanje razumevanja, kako deluje ta funkcija, lahko privede do spopadov z elementi spletnega mesta in drugimi tovrstnimi frustracijami. Prej so se podobne situacije zgodile z napakami v brskalnikih. Sedaj bo skrivnost, kako pravilno uporabljati lastnost Float, odkrita in ni več nobenega problema s tem. Lastnost Float ima štiri vrednosti:
  • Float: dedovanje;
  • Float: desno;
  • Plovec: levo;
  • Float: noben;
  • Za tiste, ki poznajo angleščino, mora biti vrednost parametrov lastnosti Float jasna. Toda za tiste, ki ne vedo, lahko daš malo razlage. Parameter: levo; premakne telo elementa v skrajni levi kot matičnega elementa. Enako se zgodi (samo na drugi strani) z bcgjkmpjdfybb parametrom: desno; . Vrednost: podeduj; pove elementu, naj prevzame enake parametre kot v nadrejenem. Ti elementi se imenujejo tudi pripadniki, ker se nahajajo neposredno znotraj matične kode v kodi html. Nepremičnina: nič; omogoča elementu, da ne krši običajnega pretoka dokumenta, je nastavljen na privzeto za vsedeli kode.

    Kako deluje Float? Lastnost Float CSS deluje preprosto. Vse, kar je bilo opisano zgoraj, je mogoče storiti brez veliko truda. Potem bo vse tako enostavno. Toda preden nadaljujete s preučevanjem lastnosti Floata, je vredno malo razumeti teorijo. Vsak element spletnega mesta je blok. To je preprosto videti, če konzolo odprete v brskalniku Google Chrome s pritiskom na Ctrl + Shift + J. Najprej vsi ti bloki gredo eden za drugim. Kot je razvidno iz spodnjega primera, so vrstice kode ena za drugo, zato bodo prikazane strogo ena za drugo.
    To se imenuje normalen pretok. S tem tečajem vsi bloki ležijo drug na drugega (brez prečkanja telesa elementov) navpično. Prvič, celotna vsebina spletne strani se nahaja na ta način. Toda pri uporabi lastnosti jezika CSS Float Left element zapusti svoj naravni položaj na strani in se premakne v skrajni levi položaj. Takšno vedenje neizogibno vodi v kolizijo s tistimi elementi, ki so ostali v normalnem poteku. Z drugimi besedami, elementi namesto, da bi bili nameščeni navpično, so zdaj blizu drug drugemu. Če ima starševski element dovolj prostora, da lahko postavi dve podružnici znotraj sebe, se ne zgodi noben trk, in če ne, potem je uvedba enega predmeta na drugega neizogibna. Zelo pomembno je, da se spomnite, da razumete delovanje lastnine Float CSS.

    Jasna funkcija zareševanje problemov

    Funkcija Float je srce enega - Clear. Skupaj niso izlili vode. Obe funkciji se medsebojno dopolnjujeta in razvijata. Kot je navedeno zgoraj, sosednji elementi gredo iz svojega običajnega poteka in prav tako začnejo plavati kot element, za katerega je bila uporabljena lastnost Float (na primer CSS Float Top). Zato se namesto enega plavajočega elementa pojavita dva, in ne na mestu, kjer naj bi razvijalca postavila. Od zdaj naprej se vsi problemi šele začenjajo.
    Funkcija Clear ima pet vrednosti:
  • : levo;
  • : desno;
  • : oboje;
  • : dedovanje;
  • nič;
  • Po analogiji lahko razumete, kdaj je najbolje uporabiti funkcijo Clear. Če imamo niz zapisanih v Float: desno; (CSS koda je mišljeno), potem mora biti funkcija Clear: desno ;. Enako velja za lastnosti Float: levo; dopolnjevanje bo jasno: levo; . Pri pisanju kode Počisti: oboje; izkaže se, da bo element, za katerega se uporablja ta funkcija, pod postavkami, za katere je uporabljena funkcija Float. Podeduj prevzame konfiguracijo starševskih elementov in nobena sprememba strukture strani. Če razumete, kako deluje Float in Clear, lahko napišete edinstveno in nenavadno HTML in CSS float kodo, ki bo vašo spletno stran naredila edinstveno.

    Uporaba Float za ustvarjanje stolpcev

    Funkcija Float je še posebej koristna pri ustvarjanju stolpcev na spletnem mestu (ali postavitev CSS v središče spletne strani). Ta kodeks je najbolj praktičen in priročen, zato je vredno razmisliti o nekaj možnostih za ustvarjanje običajnegapredlogo mesta, sestavljeno iz dveh stolpcev. Vzemimo na primer standardno spletno stran z levo vsebino, navigacijsko vrstico na desni, glavo in nogo. Koda bo:
    Zdaj je treba razumeti, kaj je zapisano tukaj. Nadrejeni element, ki vsebuje večino kode html, se imenuje vsebnik. Omogoča vam, da ne podajate elementov, ki se uporabljajo s funkcijo Float, ki so razdeljeni v različne smeri. Če ne bi bilo, bi ti elementi tečili do meja samega brskalnika. Nato se v kodi nahaja #content in #navigation. Ti elementi uporabljajo funkcijo Float. #content se pošlje na levo in #navigacija se pomakne v desno. To je potrebno, da se ustvari stran v dveh stolpcih. Prepričajte se, da ste določili širino, tako da se objekti ne prekrivajo. Širino lahko določite tudi v odstotkih. Torej še bolj priročno kot v slikovnih pikah. Na primer, 45% za #content in 45% za #navigation ter preostalih 10% za lastnosti povratka. Lastnost Počisti, ki se nahaja na #footer, ne omogoča, da noga sledi #navigation in #content, vendar jo pusti na istem mestu kot je bila. Kaj se lahko zgodi? če ne določite lastnosti Počisti? V tej kodi se #footer preprosto poveča in se pojavi pod #navigacijo. To se bo zgodilo, ker #navigacija ima dovolj prostora za postavitev drugega elementa. V tem ilustrativnem primeru je zelo jasno, kako se lastnosti Clear Float med seboj dopolnjujejo.

    Težave, ki se lahko pojavijo pri pisanju kode

    Zgornji primeri so zelo preprosti. Toda z njimi lahko pride do težav. Na splošno,pravzaprav se lahko pojavijo številne nepričakovane težave s funkcijo Float. To ne bi bilo čudno, vendar težave običajno ne izvirajo iz CSS-ja, temveč z html kodo. Lokacija, kjer je postavka s funkcijo Float v kodi html, neposredno vpliva na delo slednjega. Da bi se izognili vsem vrstam težav, je najbolje upoštevati preprosto pravilo - najprej v kodo postavite elemente s funkcijo Float. Skoraj vedno deluje in zmanjšuje njihovo nepričakovano vedenje.

    Kolizija elementov

    Kolizija se pojavi, ko nadrejeni element, ki vsebuje več hčer, ne more prilegati vseh in se prekrivajo. Zdi se, da se predmeti morda ne pojavijo, ampak izginejo s spletnega mesta. To ni brskalnik, ampak dobro pričakovano in pravilno obnašanje elementov s funkcijo Float. Zaradi dejstva, da so ti elementi prvotno v normalnem poteku, in potem krši lastnost Float, jih brskalnik lahko odstrani s strani spletnega mesta. Vendar ne smete obupati, ker je rešitev preprosta in jasna - uporabite lastnino podjetja Cear. Možno je, da je Clear najbolj učinkovit način, da se rešite tega problema. Toda problem kolizije elementov spletne strani je mogoče rešiti na drugačen način. Obstajajo vsaj še dva načina:
  • z uporabo funkcije položaja;
  • Aplikacija Flexbox.
  • Funkcija položaja je dobra alternativa CSS Float. V središču spletne strani, v primeru položaja, je najbolje urediti sliko. Če vrednost uporabite pravilno: absolutno: relativno, potem bodo predmeti dosegli svoje mesto in ne bododrug drugega.

    Analiza funkcije in položaja funkcije Float

    Treba je podrobneje raziskati, kako zamenjati Float kodo HTML in CSS s položajem. Pravzaprav je to zelo preprosto. Recimo, da je element #container in #div. #container {širina: 40%; plovec: levo; margin: 10px; } #div {širina: 40%; float: desno; margin: 10px; } #footer {jasno: oboje; }
    V tem primeru bo uporaba drugega vsebnika (CSS Div) Float pripomogla k ustvarjanju standardnega mesta z dvema stolpcema. Nikoli ne pozabite na funkcije Clear. Brez nje se bodo pojavili le prekrivni elementi. Torej, kako spremenim CSS in Float kodo, tako da uporabljam Postion? To je zelo enostavno: #container {širina: 40%; položaj: relativna; margin: 10px; } #div {širina: 40%; položaj: relativna; margin: 10px; } V tem primeru bo #container in #div sprejel položaj razvijalca v nadrejenem elementu. Glavna stvar? postavite #div in #container v en starševski element, ki ustreza njihovi velikosti.

    Flexbox - Kako ta funkcija pomaga zamenjati CSS Float?

    Flexbox je trenutno najbolj napreden način za ustvarjanje spletnih strani, zato starejši brskalniki ne podpirajo te funkcije. To dejstvo se ne sme diskontirati, saj uporabniki z zastarelimi različicami brskalnikov ne bodo mogli videti pravilne različice spletnega mesta. Flexbox ni lastnost, temveč ločen modul. Zato flexbox podpira številne lastnosti, ki delujejo samo z njim. Poleg tega je v funkcijskem prikazovalniku, ki ima tri parametre v vrstici, bloku in inline bloku v flexboxu, samo en flex-flow.

    Kako deluje Flexbox?

    Ta tehnologija bo razvijalcem pomagala pri usklajevanju elementov vodoravno in navpično. Prav tako lahko Flexbox spremeni smer in redprikaz predmetov. Ta tehnologija ima dve osi: Glavna os in Križno os, okoli katere je zgrajen celoten Flexbox. Izbriše tudi funkcijo Float in Clear. Sistem gradi v kodi, ki uporablja samo njene lastnosti, zato na žalost ne bo mogel podvojiti drugih lastnosti elementov, kot sta Float in Position. In to bi bilo zelo, ker, kot je omenjeno zgoraj, Flexbox deluje samo v novih različicah brskalnikov.
    Pomembno je spomniti se, da na koncu položaj, Flexbox in Float naredijo enako - ustvarijo nenavadno in izvirno obliko vašega spletnega mesta. Vsaka možnost v članku to počne na svoj način in ima tako prednosti kot slabosti. Še več, Float (na primer spletno mesto s preprosto strukturo) je nekje super in bolje je uporabiti Position ali Flexbox nekje.

    Bug Double Margin

    Vendar včasih, na žalost, vsak razvijalec naleti na težave, ki niso povezane s pisno kodo, vendar z napakami v določeni vrsti brskalnika. V Internet Explorerju je na primer napaka, imenovana Double Margin Bug. Parameter Margin pomnoži z dve, kar povzroči zamik elementov spletnega mesta zunaj brskalnika. Da bi se temu izognili, je dovolj, da podate parameter Margin v odstotkih. Običajno se ta napaka pojavi, ko so vrednosti lastnosti Margin in Float enake. #div {float: levo; margin-left: 10px; } Ta koda premakne element v Internet Explorerju za 20 px v levo. Lahko spremenite kodo: #div {float: levo; levi rob: 10%; } ali tako, #div {float: levo; margin-right: 10px; } Obe možnosti bosta rešili problem pristranskosti elementov.

    Napake brskalnika in napačno kartiranje spletnega mesta

    Spomnimo se, da Internet Explorer ni edini brskalnik, ki ima lahko napake. Starejše različice brskalnika Google Chrome in Mozilla tudi nepravilno odražajo nekatere elemente sodobnih spletnih mest. Za vsako od teh napak najdete rešitev. Na splošno želim omeniti, da bo uporaba Floata ustvarila izvirno in privlačno obliko spletnega mesta. Razumevanje osnov in načel te funkcije bo preprečilo napake in olajšalo življenje razvijalcem.

    Sorodne publikacije