CSS Float: opis, lastnosti

Float - ena od osnovnih funkcij jezika CSS (Cascading Style Sheets

Razvijalci lahko uporabijo tudi bolj priročne možnosti oblikovanja, na primer Flexbox ali Position, da spremenijo mesto elementa na spletnem mestu, ampak o vsem, kar je v redu. Najprej morate razumeti prednosti in slabosti lastnosti Float.

CSS Float - zakaj je to potrebno?

Float je lastnost elementov za pozicioniranje. Vsak dan ga lahko vidimo na straneh časopisov in revij, gledamo slike in besedilo, ki jih zelo skrbno obdaja. V svetu kod HTML in CSS pri uporabi funkcije Float se mora zgoditi enako. Vendar je treba spomniti, da urejanje slik ni vedno glavni namen te funkcije. Uporabite ga lahko za ustvarjanje popularne postavitve elementov spletnega mesta v dveh, treh, štirih stolpcih. Dejansko se lastnost Float CSS nanaša na skoraj vsak element HTML. Če poznate osnove urejanja postavitve elementov s funkcijo Float, potem Property, ki ustvarja kakršno koli spletno stran, ne bo težko.

Posebni programi za oblikovalce postavitev včasih spregledajo slike, a jih preidejo. V spletnem dizajnu se zgodijo dovolj podobne stvari, le da je prikazano besedilo, namesto slike na sliki (če je lastnost Float nepravilno uporabljena) poleg nje ali pod njim, vendar vedno, če to potrebuje razvijalec.

Opis CSS Float lastnosti

Pravzaprav je sposobnost uporabe lastnosti Float zelo dober ace v rokavu za kateregakoli spletnega oblikovalca. Ampak, žal, pomanjkanje razumevanja delovanja te funkcije lahko pripelje do spopadov elementov mesta in drugih takšnih frustracij. V preteklosti so se podobne situacije pojavile tudi zaradi hroščev v brskalnikih. Zdaj se bo odkrila skrivnost, kako pravilno uporabiti lastnost Float, in nobenih težav s tem ne bo več.

Lastnina Float ima štiri pomene:

• Float: dediščino;
• Plavaj: desno;
• Plavaj: levo;
• Float: nič;

Za tiste, ki poznajo angleščino, morajo biti vrednosti parametrov lastnosti plovila jasne. Toda za tiste, ki ne vedo, obstaja majhna razlaga. Parameter : levo; premakne telo elementa v najbolj levi kotiček nadrejenega elementa. Enako se zgodi (samo v drugi smeri) s parametrom bcgjkmpjdfybb : prav;. Pomen : dediščino da element vzame iste nastavitve kot starš. Takšni elementi se imenujejo tudi otroci, saj se nahajajo v matični izvorni kodi v html kodi. Lastnina : nič; Omogoča, da element ne prekine običajnega pretoka dokumenta, je privzeto nastavljen za vse dele kode.

Kako deluje Float?

Funkcija Float CSS deluje preprosto. Vse, kar je bilo opisano zgoraj, je mogoče storiti brez težav. Potem bo vse tako preprosto. Toda pred nadaljevanjem študija lastnosti Float, je vredno malo razumevanja teorije. Vsak element spletnega mesta je blok. To je preprosto videti, tako da odprete konzolo v brskalniku Google Chrome s pritiskom na Ctrl + Shift + J. Besedilo, naslov, slika, povezave in vsi drugi deli mesta bodo prikazani v blokih različnih velikosti. Na začetku, vsi ti bloki gredo ena za drugo. Kot je prikazano v spodnjem primeru, so vrstice kode eno za drugo, zato bodo prikazane strogo eno za drugo.

To se imenuje normalni tok. S tem tokom se vsi bloki nahajajo drug poleg drugega (brez prečkanja telesa elementov). Na začetku se vse vsebine spletne strani nahajajo na ta način. Toda pri uporabi, na primer, lastnosti jezika CSS Float Left, element pusti svoj naraven položaj na strani in se premakne v levo levo. To vedenje neizogibno vodi v trčenje s tistimi elementi, ki so ostali v normalnem toku.

Z drugimi besedami, elementi namesto da bi bili nameščeni navpično, so zdaj eno poleg drugega. Če starševski element ima dovolj prostora, da doda dva otroka v sebi, potem ne pride do trčenja, in če ne, potem je postavitev enega predmeta na drugega neizogibna. To je izredno pomembno, da se spomnimo za razumevanje dela Float CSS lastnine.

Jasna funkcija za reševanje težav

Funkcija Float ima srčnega prijatelja - Clear. Skupaj oni - ne prelijte vode. Obe funkciji dopolnjujeta in razvijalcu omogočita srečo. Kot je že omenjeno, sosednji elementi izhajajo iz njihovega običajnega pretoka in tudi začnejo "plavati", kot je element, na katerega je bila uporabljena lastnost Float (na primer CSS Float Top). Posledično se namesto enega plavajočega elementa dobita dva in sploh ne v kraju, kjer naj bi ga razvijalec. Od tega trenutka se začnejo vse težave.

Funkcija Clear vsebuje pet vrednosti:

• : levo;
• : prav;
• : oboje;
• : dedujejo;
• noben;

Po analogiji lahko razumete, kdaj je najbolje uporabiti funkcijo Clear. Če imamo črto v kodi Plavaj: desno; (CSS-koda je mišljena), potem mora biti funkcija Počisti: prav-. Ista stvar se vrti in lastnosti Plavaj: levo; ga bo dopolnjevala Počisti: levo;. Pri pisanju kode Počisti: se izkaže, da je element, na katerega se nanaša ta funkcija, pod elementi, na katere se uporablja funkcija Float. Dedovanje zahteva nastavitve iz nadrejenega elementa in nobena ne spreminja strukture mesta. Če razumete, kako funkcije Float in Clear, lahko napišete edinstveno in nenavadno HTML in CSS Float-code, kar bo vaše spletno mesto edinstveno.

Uporaba Float za ustvarjanje stolpcev

Posebno koristno je lastnost Float pri ustvarjanju stolpcev na spletnem mestu (ali postavitev vsebine CSS Float na sredino spletne strani). To je najbolj praktična in priročna koda, zato upoštevajte več možnosti za ustvarjanje predloge po meri za spletno mesto, sestavljeno iz dveh stolpcev. Na primer, vzemite standardno spletno stran z vsebino na levi strani, navigacijsko vrstico (navigacijska vrstica) na desni, naslov in noga. Koda bo:

Zdaj moramo razumeti, kaj je tukaj napisano. Nadrejeni element, ki vsebuje glavni del html kode, se imenuje vsebnik. Omogoča vam, da ne daste elementov, za katere se uporablja funkcija Float, da se lahko sprehajajo v različnih smereh. Če ne, potem bi ti elementi plavali na sami meji brskalnika.

Nato v kodi pojdite na #content in #navigation. Za te elemente se uporablja funkcija Float. #content je poslana na levo in #navigation gre na desno. To je potrebno za ustvarjanje mesta dveh stolpcev. Določiti morate širino, da se predmeti ne prekrivajo. Širina je lahko določena v odstotkih. Torej še bolj priročen kot v pikslih. Na primer, 45% za # vsebino in 45% za # navajenje, in preostalim 10% dajte na lastnost marže.

Lastnost Clear, ki je v #footer, ne omogoča, da noga sledi #navigation in #content, vendar jo zapusti na istem mestu, na katerem je bila. Kaj se lahko zgodi? če ne navedete lastnosti Clear? V tej kodi bo #footer preprosto šel gor in se prikazal pod #navigation. To se bo zgodilo zaradi dejstva, da ima #navigation dovolj prostora za postavitev še enega elementa. V tem ilustrativnem primeru lahko jasno vidite, kako se lastnosti Clear in Float dopolnjujeta.

Težave, s katerimi se lahko srečate pri pisanju kode

Zgornji primeri so precej preprosti. Toda lahko imajo tudi težave. Na splošno se lahko s funkcijo Float zgodi veliko nepričakovanih težav. Vendar pa je čudno, da se težave običajno ne pojavijo pri CSS, temveč z html kodo. Mesto, kjer je element s funkcijo Float v html kodi, neposredno vpliva na njegovo delo. Da bi se izognili različnim vrstam težav, je najbolje slediti preprostemu pravilu - postaviti elemente s funkcijo Float najprej v kodo. Skoraj vedno deluje in zmanjšuje njihovo nepričakovano obnašanje.

Trčenje elementov

Trčenje se pojavi, če starševski element, ki vsebuje več otrok, ne more ustrezati vsem, in se medsebojno nadgrajujejo. Zdi se celo, da se elementi morda ne bodo prikazali, ampak bodo izginili s spletnega mesta. To ni napaka v brskalniku, temveč pričakovano in pravilno ravnanje elementov s funkcijo Float.

Zaradi dejstva, da so ti elementi sprva v normalnem toku in jih nato zlorabi lastnost Float, jih lahko brskalnik odstrani s strani spletnega mesta. Vendar pa ne obupajte, ker je rešitev preprosta in jasna - uporabite lastnost Cear. Možno je, da je Clear najučinkovitejša metoda iz vseh izhodov iz tega problema.

Toda problem trčenja elementov spletne strani se lahko reši na drug način. Na voljo sta vsaj dva načina:

• uporaba funkcije Položaj;
• uporaba Flexbox.

Funkcija Position je včasih dobra alternativa CSS Float. V središču spletne strani je v primeru uporabe položaja najbolje poskrbeti za slike. Če pravilno uporabite vrednosti: absolutno in: relativno, bodo elementi padli na svoje mesto in se ne bodo prekrivali.

Razčlenjevanje funkcije Position and Float

Pomembno je, da se podrobneje seznanite s kodo HTML in zamenjati CSS Float s položajem. Dejansko je zelo preprosta. Recimo, da je element #container in #div.

#container {

širina: 40%;

float: levo;

margin: 10px;

}

#div {

širina: 40%;

float: desno;

margin: 10px;

}

#footer {

jasno: oboje;

}

V tem primeru bo uporaba funkcije Float (CSS Div) v drugem vsebniku pripomogla k oblikovanju standardnega mesta dveh stolpcev. Nikoli ne pozabite na funkcijo Clear. Brez njega lahko nadgradite elemente samo nad drugo.

Torej, kako spremeniti CSS in Float kodo za uporabo Postion? To je zelo preprosto:

#container {

širina: 40%;

položaj: relativni;

margin: 10px;

}

#div {

širina: 40%;

položaj: relativni;

margin: 10px;

}

V tem primeru sta #container in #div zaželeni položaj razvijalca v nadrejenem elementu. Glavna stvar? postavite #div in #container v en starševski element, ki se bo ujemal z njihovimi velikostmi.

Flexbox - kako ta funkcija pomaga nadomestiti CSS Float?

Flexbox je najnaprednejši način ustvarjanja spletnih strani v tem trenutku, zato te starejših različic brskalnikov ne podpirajo. To dejstvo ne bi smelo biti diskontirano, ker 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 njo. Poleg tega ima funkcija prikaza, ki ima tri parametre inline, bloka in inline-block v flexbox, le en flex-flow.

Kako deluje Flexbox?

Ta tehnologija bo razvijalcu omogočila enostavno prilagajanje elementov horizontalno in navpično. Tudi Flexbox lahko spremeni smer in vrstni red elementov. Ta tehnologija ima dve osi: glavna os in križišče, okoli katere je zgrajen celoten Flexbox. Prav tako odpravlja delovanje funkcij Float in Clear. Gradi svoj sistem v kodi, ki uporablja lastnosti, ki so mu lastne, zato žal ne morete podvajati drugih lastnosti v elementih, kot sta Float in Position. In to bi bilo zelo priročno, ker, kot je omenjeno zgoraj, Flexbox deluje samo v novih različicah brskalnikov.

Treba je zapomniti, da v končni analizi Position, Flexbox in Float storijo enako - ustvarite nenavaden in izviren dizajn za vašo spletno stran. Vsaka možnost, opisana v članku, to naredi na svoj način in ima zato prednosti in slabosti. Poleg tega se lahko zgodi, da funkcija Float deluje dobro (na primer na mestu z enostavno strukturo), vendar je nekje bolje uporabiti položaj ali Flexbox.

Double Margin Bug

Vendar včasih, žal, vsak razvijalec ima težave, ki niso povezane s pisno kodo, temveč hrošči v določeni vrsti brskalnika. Na primer, v Internet Explorerju je napaka, ki se imenuje Double Margin Bug. Parameter Margin pomnoži z dvema, kar povzroči, da se elementi mesta premaknejo iz meja brskalnika. Da bi se temu izognili, samo določite parameter Margin v odstotkih. Ta napaka se običajno zgodi, ko je vrednost lastnosti Margin in Float enaka.

#div {

float: levo;

margin-left: 10px;

}

Ta koda premakne element v Internet Explorerju 20 slikovnih pik na levi. To kodo lahko spremenite tako:

#div {

float: levo;

margin-levo: 10%;

}

ali tako,

#div {

float: levo;

margin-right: 10px;

}

Oba od teh možnosti rešita problem pomika elementa.

Napake brskalnika in napačen prikaz mesta

Treba je spomniti, da Internet Explorer ni edini brskalnik, v katerem se lahko pojavijo napake. Stare različice brskalnika Google Chrome in Mozilla tudi nepravilno prikazujejo nekatere elemente sodobnih spletnih mest. Za vsako od teh hroščev najdete rešitev. Na splošno želim poudariti, da bo uporaba Float ustvarila izvirno in privlačno obliko spletnega mesta. Razumevanje temeljev in načel te lastnine bo preprečilo napake in olajšalo življenje vsakemu razvijalcu.