Računi 

Float in clear v CSS sta orodji za postavitev, ki temeljita na blokih. Atributi HTML: vrste in uporaba. Referenca HTML Generic class clearfix

Pozdravljeni, dragi bralci spletnega dnevnika! Po zelo pomembnem premoru sem se odločil nadaljevati temo preučevanja CSS in današnji članek bo posvečen ustvarjanju plavajočih elementov z uporabo float, s praktičnimi primeri si bomo ogledali učinek tega pravila, skupaj z lastnostjo clear, za ustvarjanje stolpcev in horizontalni meni.

Za nepoznavalce menim, da bi bilo bolje začeti z branjem drugih materialov na kaskadnih slogovnih listih. Naj vas spomnim, da so vsi članki na to temo v razdelku, kjer lahko dobite potrebne informacije.

Plavajoče elemente najdemo tudi v HTML, ko je treba ustvariti ovitje besedila okoli istih slik (atribut poravnave oznake img s parametroma levo in desno). Ta vidik je torej zelo priljubljen pri razvoju vsebine spletnih strani.

V današnji publikaciji bomo analizirali lebdeče (levo, desno, nič) in dejanja jasnih pravil tudi glede na, ki so osnova za postavitev blokov. Seveda na sedanji stopnji velika večina pri izdelavi spletnega mesta uporablja progresivni CMS (zlasti WordPress). Verjemite pa, da vam bo poznavanje osnov stilov in hiperbesedilnega označevalnega jezika dobro služilo v prihodnosti.

Kako ustvariti plavajoče elemente v CSS z uporabo float

Za začetek naj vas spomnim, da so v normalnem toku spletni elementi na spletni strani razporejeni strogo v skladu z vrstnim redom, ki je določen v kodi. Vendar, kot veste, vedno obstajajo izjeme. To je logično, saj je za reševanje nestandardnih problemov potreben vzvod.

Eno od teh orodij je na primer, o katerem si lahko več preberete na navedeni povezavi. No, drugo sredstvo za spreminjanje vrstnega reda standardnega prikaza spletnih elementov je pravilo lebdečega.

Podatke o kateri koli lastnosti (lastnosti) CSS in njenih vrednostih je mogoče pridobiti na strani s specifikacijami W3C, kjer so navedene vse informacije (podatki za drugo različico stilskih listov, vendar to velja tudi za CSS3, ki je že uradno v sila, čeprav ni popolnoma razvita):


Kot lahko vidite, lahko float sprejme enega od treh možnih parametrov (levo, desno, nič) in (podedovanje). float brez parametra uporabljen privzeto in pomeni, da bodo elementi prikazani v vrstnem redu, ki sledi normalnemu toku. Ampak desno ali levo omogočajo ustvarjanje plavajočih blokov z odmikom v desno oziroma levo.

Če se spomnite, se najpogosteje uporabljeni obnašajo drugače (na splošno je vrsta prikaza vseh elementov implementirana s pomočjo CSS z uporabo lastnosti Display). Blokovne zavzamejo celotno razpoložljivo širino, razen če ni navedena vrednost širine. Višina je določena z vsebino, če parameter višine ni določen.

Oznake v vrstici so postavljene v eno vrstico in se premaknejo v drugo le, če zmanjka razpoložljivega prostora za širino. V običajnem primeru jim ni mogoče določiti višine in širine. Na podlagi teh informacij si poglejmo konkreten primer.

Zaradi jasnosti vključimo pravila CSS (ta metoda se običajno redko uporablja v praksi, vendar je zelo priročna za testiranje).

Da bi se prepričali, da je zgoraj navedeno pravilno, vzemimo dve vgrajeni oznaki, ki jima določimo lastnosti širine in višine, ter eno oznako bloka. Da zagotovimo jasnost, nastavimo barvne odtenke za vsak blok z uporabo ozadja (lahko storite enako):

Vgrajeni element 1 Vgrajeni element 2

Bločni element

Končna slika bo naslednja:

Kot lahko vidite, smo prejeli praktično potrditev, da navedena višina (height:50px) in širina (width:450px) ne delujeta pod običajnimi pogoji za oznako SPAN, ki je v vrstici. Nato poskusimo nastaviti lastnost float right za prvi spletni element v vrstici in lastnost float left za drugega:

Vgrajeni element 1 Vgrajeni element 2

Bločni element

Kot rezultat dobimo:


Povsem očitno je, da v tem primeru postaneta prvi in ​​drugi spletni element lebdeča (eden se je premaknil do konca v levo, drugi v desno). Dodatno so pridobili širino in višino, ki sta določeni v slogih CSS.

Poleg tega spletni elementi, definirani z vgrajeno oznako SPAN, drugače komunicirajo s sosednjim vsebnikom DIV. Če dodatno odstranimo, recimo, atribut širine iz stilov obeh oznak SPAN, bo njuna širina določena z vsebino (v našem primeru dolžina besedila z imeni elementov):

Zdaj začne vsebina bloka DIV teči desno od spletnega elementa s float: left. Smiselno je, da se na tej spletni strani nazorneje seznanite z rezultati konkretnih praktičnih raziskav, kjer lahko poskusite sami spremeniti območje gledanja in opazujete, kako se bloki obnašajo drug glede na drugega:


Če povzamemo, definirajmo nekaj funkcij, ki bodo del vsebnika z eno ali drugo vrednostjo lastnosti float (desno ali levo):

  • Element je zamaknjen proti levemu ali desnemu robu;
  • Postane zamašen ne glede na to, kaj je bil prej;
  • Obnaša se, kot da sosednji blokovni spletni elementi (s pravilom display:block) ne obstajajo. To lahko preverite, če si še enkrat ogledate posnetke zaslona tega razdelka članka;
  • Hkrati se bodo vgrajene oznake (display:inline) ovile okoli plavajočih blokov. Če znova pogledate prejšnji posnetek zaslona, ​​boste opazili, da se vsebina vsebnika DIV (»Block Element«) ovija okoli SPAN s float:left na desni.
  • Če izrecno ne določite širine lebdečega bloka (v našem primeru width:450px), bo ta določena z njegovo vsebino;

V tem primeru smo si ogledali glavne značilnosti plavajočih blokov z različnimi parametri lastnosti lebdečega elementa in izbrali vgrajene in blokovne spletne elemente (z različnimi prikaznimi vrednostmi), da bi zapletli nalogo. Za okrepitev gradiva si oglejte informativni video E. Popova:

Kako narediti vodoravni meni s CSS (float)

Nato bomo analizirali zelo specifično nalogo ustvarjanja vodoravnega menija z uporabo lebdečih blokov, ki se zelo pogosto uporablja pri razvoju spletnih strani. Najprej sestavimo enega, katerega koda bo videti takole:

  • 1. odstavek
  • Točka 2
  • Točka 3
  • Točka 4
  • Točka 5

      • Dobimo nekaj takega:

      Zdaj pa nekoliko uredimo dobljeni meni z uporabo lastnosti CSS: odstranimo oznake nasproti vsakega elementa z uporabo sloga seznama brez, pretvorimo male črke v blok tako, da zanje uporabimo pravilo bloka prikaza, in za raznolikost damo vsakemu od njih lepo ozadje .

      Prav tako bi bilo dobro določiti rezervo za nadaljnje izboljšanje zasnove tako, da elemente menija rahlo premaknete drug od drugega. Za spletne strani spletnega mesta WordPress lahko nastavite oznako UL "meni", za katero v datoteki STYLE.CSS določite potrebne sloge:

      Meni (list-style:none;margin:0;padding:15px;) .menu li a(display:block;padding:10px;background:#EFCDB8;) .menu li(margin:10px;)

      V tem primeru namenoma ne uporabljam atributa STYLE, ker bi me prisilil, da večkrat določim iste lastnosti CSS za vsako oznako LI. Kot rezultat naših dejanj bo meni videti takole:


      Razlika s prejšnjo različico je osupljiva, kajne? Zdaj imamo sliko, ki je veliko bolj podobna klasičnemu jedilniku. Res je, da se točke v njem nahajajo ne vodoravno, ampak navpično. Če želite v celoti rešiti težavo, morate elementu HTML seznama LI dodati lastnost float left; celotno pravilo CSS zanjo bo takšno:

      Meni li(margin:10px;float:left;)

      Posledično se bo meni spremenil v vodoravno različico:


      Mislim, da na podlagi zgoraj navedenih informacij razumete razlog, zakaj je prišlo do takšne metamorfoze. Vsak spletni element menija z lebdečo levo je voden glede na lokacijo vsebnika, njegove meje in poskuša zavzeti prostor tako, da se premika čim bolj navzgor in v levo. To se je zgodilo z blokom "Točka 1", ki je bil ustrezno postavljen.

      Tudi “Item 2” se je premaknil v levo, vendar je njegovo nadaljnje premikanje blokiral prvi spletni element menija. In tako naprej. Kot rezultat smo prejeli vodoravno zaporedno verigo vseh komponent menija. Vse podrobnosti si lahko ogledate sami. Zdaj pa poskusimo umetno zmanjšati širino vidnega polja:

      V primeru, da lebdeči element ne najde mesta na vrhu, zasede navpični položaj najvišjega položaja v spodnji vrstici in se premakne skrajno levo. V praksi se pogosto zgodi, da je ime posameznega artikla lahko daljše in ne sodi v standardne meje. Če je to prvi element, potem lahko celoten meni izgleda takole:

      V tem primeru »Postavka 4« najprej upošteva najvišjo zgornjo obrobo in se šele nato premakne na skrajno levo pozicijo, vendar trči v prvi spletni element. Če se višina, recimo, tretje točke izkaže za večjo, se slika spremeni v naslednje:

      Nato bo “Item 3” poravnal svoj položaj s spodnjo obrobo zadnjega spletnega elementa v zgornji vrstici in se šele nato premaknil v levo. Vsa zgoraj opisana gibanja vam morajo pomagati razumeti bistvo učinka lebdenja na razporeditev spletnih elementov na strani.

      Če se podobne težave pojavijo pri praktični postavitvi, lahko namesto lastnosti CSS float uporabite druge metode za ustvarjanje vodoravnega menija. Vendar je to ločena tema, ki se ji bomo zagotovo posvetili v prihodnosti.

      Učinek uporabe lastnosti jasno (oboje, levo, desno).

      Zdaj pa poglejmo, kako uporabiti funkcije lebdečih elementov v svojo korist, hkrati pa prisiliti naslednje bloke na spletni strani, da upoštevajo njihov položaj in velikost. To je mogoče doseči z jasnim pravilom. Ponovno lahko vse informacije pridobite iz izvirnega vira (konzorcij W3C):


      Pravilo CSS clear ima štiri možne vrednosti, pri čemer je lastnost none privzeta, kar je naravno, saj zagotavlja standardni tok kode. Tudi jasno (brez, levo, desno, oboje) je podedovano od nadrejene oznake (podedovanje).

      Bistvo tega pravila, napisanega za določen blok, je preklic dejanja glede na njegovo vrednost:

      • nič - prekliče učinek same lastnosti clear, posledično se vsebina oznake (na primer besedilo) ovije okoli spletnega elementa v skladu s slogi, določenimi zanj v obliki lebdečega;
      • levo in desno - odpravlja tok okoli levega oziroma desnega roba;
      • oboje - preprečuje pretok tako po desni kot po levi. To je najpogostejša vrednost clear v praktični uporabi.

      Ne razumem ničesar? Ali pomen dojemate nejasno in samo intuitivno? Nič, ko pogledamo jasen primer, mislim, da bo vse prišlo na svoje mesto. Če želite to narediti, postavimo nalogo: dva bloka postavimo vodoravno drug poleg drugega in na dno postavimo nekaj besedila. Ta oblika je precej pogosta v postavitvi.

      Torej, vzemimo dva vsebnika DIV, ki lahko shematično predstavljata 2 stolpca. Napišimo lastnosti CSS zanje, vključno z fiksna širina(širina), barvo ozadja in jih spremenite v lebdeče z uporabo lebdeče levo. Dodajmo jim besedilo, obdano z oznako P, ki je, kot veste, mala črka:

      Levi stolpec
      Desni stolpec

      DIV-ji se bodo postavili v vodoravno vrsto, pri čemer bo prvi čim bolj levo. In drugi bo parkiral na svoj desni rob (zanj bo to lokacija na levi) in ne bo dovolil, da bi se prvi div premaknil dlje. Toda besedilo bo nadaljevalo to vrstico, saj skupna širina to omogoča:

      Kot razumete, v tej situaciji naše naloge ni mogoče šteti za opravljeno. Prvič, pri zoženju vidnega polja za količino, ki je manjša od skupne širine divov, desni stolpec skoči navzdol in se nahaja pod levo. Drugič, vsebina tretjega spletnega elementa z besedilom se nahaja zraven in ne na dnu stolpcev:


      Spet lahko sami vidite, kako se obnašajo vsi elementi, ki umetno zožijo in razširijo območje gledanja. Za odpravo opisanih pomanjkljivosti bomo dodali vsebnik z lastnostmi CSS in vanj postavili vse obstoječe sloje. Dodali bomo tudi dodaten prazen DIV s pravilom CSS clear both, da preprečimo, da bi vsebina spodnjega bloka (besedilo) tekla okoli stolpcev na desni in levi:

      Levi stolpec
      Desni stolpec

      Upoštevajte, da velikim diva stilom I dodano samodejno pravilo margin:0, ki se lahko uporablja za centriranje posode. Končni pogled bo videti takole:


      Sedaj je naš problem rešen, saj rezultat izpolnjuje zastavljene pogoje: dva stolpca se nahajata v vodoravni vrstici, vsebina spletnega elementa pod kodo (BESEDILO) pa bo trdno ostala na svojem pravem mestu pod stolpci.

      Če se širina vidnega polja zmanjša, bo dizajn ostal v prvotni obliki (in prišlo bo do vodoravnega drsenja), kar lahko preverite tako, da obiščete ustrezno spletno stran z rešitvijo tega primera. Kot dodatek si oglejte videoposnetek Evgenija Popova, ki daje primer označevanja spletne strani z uporabo float in clear:

      Določa, na katero stran bo element poravnan, drugi elementi pa tečejo okoli njega na drugih straneh. Ko je float nastavljen na nič, je element upodobljen na strani kot običajno, pri čemer je dovoljena največ ena vrstica besedila za oblivanje v isti vrstici kot sam element.

      Sintaksa

      lebdi: levo | desno | nič

      Argumenti

      levo Poravna element na levo, vsi drugi elementi, kot je besedilo, pa tečejo okoli njega na desno. desno Poravna element na desno, z vsemi drugimi elementi ob njem na levi strani. none Ovijanje elementa ni nastavljeno.





      lebdi



      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


      Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.


      Objektni model

      document.getElementById("elementID ").style.styleFloat

      Oblikovanje

    • clear določa, na kateri strani elementa se drugi elementi ne smejo ovijati okoli njega. Če s parametrom float nastavite element tako, da plava, ga lastnost clear preglasi za podane strani.
    • posnetek določa območje pozicioniranega elementa, v katerem bo prikazana njegova vsebina. Vse, kar ne sodi v to območje, bo obrezano in postalo nevidno. Trenutno je edina oblika območja, ki je na voljo, pravokotnik.
    • display je večnamenski atribut, ki določa, kako naj bo element prikazan v dokumentu.

      • Smo že ugotovili. Ugotovili smo, da imajo vsebino. Vendar to še ni vse. Oznake imajo tudi atribute, ki povečujejo njihove zmogljivosti, atributi pa imajo vrednosti. Z njihovo pomočjo lahko nastavite parametre za element in določite slog oblikovanja. Na primer z oznako

      označili ste odstavek. Toda kako ga poravnati na desno? Če želite to narediti, boste potrebovali poseben atribut z ustrezno vrednostjo. Tako kot nekatere oznake nimajo para, je mogoče nekatere atribute uporabiti brez vrednosti.

      Kako napisati atribute?

      Atributi so rezervirane besede (kot oznake, le brez oglatih oklepajev), vendar so lahko njihovi pomeni različni. Tako kot pri oznakah je priporočljivo pisati atribute z vrednostmi z malimi črkami, čeprav brskalniki na splošno ne skrbijo - to je le pravilo dobrega vedenja: v ruščini TUDI NI SPREJEMLJIVO PISATI KO CAPS LOCK JE OMOGOČENO. Zakaj je HTML slabši?

      Vrednosti atributov so zapisane v naslednji obliki:

      Attribute=”value” lang=”en”

      Atribute vedno zapišite znotraj začetne oznake, za rezervirano besedo.

      odstavek

      Običajno je za eno oznako na voljo več atributov. Ni pomembno, v kakšnem vrstnem redu so navedeni.

      Univerzalni atributi

      Vsaka oznaka HTML ima svoj niz atributov. Nekateri atributi so lahko na voljo za več oznak, drugi pa morda delujejo samo z eno. Obstaja tudi skupina univerzalnih (globalnih) atributov, ki jih je mogoče uporabiti s katero koli oznako. Na kratko si oglejmo lastnosti te kategorije.

      • dostopni ključ omogoča nastavitev bližnjice na tipkovnici za dostop do določenega predmeta strani. Na primer, lahko uporabite bližnjico na tipkovnici za Alt+1 je uporabnik sledil določeni povezavi. Tako razvijte ključni navigacijski sistem.

      Vrednost atributa so lahko številke 0-9 ali črke latinske abecede:

      Povezavo odprete s pritiskom na kombinacijo tipk z eno

      • razred vam omogoča, da oznako povežete z vnaprej določenim dizajnom s pomočjo CSS. Uporaba atributa vam omogoča znatno zmanjšanje kode, saj lahko namesto večkratnega vnašanja istega bloka CSS preprosto vnesete ime ustreznega razreda.
      • Z uporabo contenteditable uporabniku lahko omogočite urejanje katerega koli elementa strani HTML: brisanje, vstavljanje, spreminjanje besedila. Isti atribut omogoča urejanje in onemogočanje. Ima samo dva pomena: prav- omogoča urejanje, lažno- prepovedati.
      • Uporaba atributa kontekstni meni Poljubnemu elementu dokumenta lahko po lastni presoji dodelite edinstvene elemente kontekstnega menija. Sam meni je ustvarjen v oznaki , atribut contextmenu pa dobi svoj identifikator.
      • režija določa smer besedila: od leve proti desni (ltr) ali od desne proti levi (rtl).
      • vlečenje omogoča prepoved (napačen) ali dovolite (prav) uporabnik lahko povleče in spusti element strani s tem atributom.
      • padajoče območje pove brskalniku, kaj naj naredi z vlečenim elementom: copy(value kopirati), premakni ( premakniti) ali ustvarite povezavo do njega (povezava).
      • skrit- atribut, ki vam omogoča, da skrijete vsebino elementa, tako da ni prikazan v brskalniku. Če je atribut nastavljen na false, je predmet prikazan, true - je skrit.
      • id določa identifikator elementa - nekakšno ime, ki je potrebno za preprosto spremembo sloga predmeta, pa tudi za dostop skriptov do njega. Vrednost atributa bo njegovo ime. Začeti se mora z latinsko črko in lahko vsebuje številke, črke iste latinske abecede (velike in male) ter vezaje (-) in podčrtaji (_) . Ne sme vsebovati ruskih črk.
      • jezik pomaga brskalniku razumeti, v katerem jeziku je napisana vsebina, in jo ustrezno oblikovati (na primer, jeziki lahko uporabljajo različne narekovaje). Vrednosti so jezikovne kode (rusko - ru, Angleščina - en in tako naprej.).
      • Preverjanje črkovanja vključuje (prav) ali onemogoči (napačen) preverjanje črkovanja. Posebej uporabna je uporaba atributa v oznakah polja obrazca, kamor bo uporabnik vnašal besedilo.
      • stil omogoča nastavitev zasnove elementa s kodo CSS.
      • tabindex omogoča določitev, kolikokrat bo moral uporabnik pritisniti tabulatorko, da predmet s tem atributom prejme fokus. Število klikov določa vrednost atributa - pozitivno celo število.
      • naslov- opis orodja, ki se prikaže, če premaknete miško na element in ga nekaj časa pustite pri miru. Vrstica v pomenu bo namig.
      • prevesti dovoljuje (da) ali prepoveduje (ne) prevod vsebine oznake.
      • poravnati nastavi poravnavo elementa. Uporabite ga lahko na primer za poravnavo besedila na levo (vrednost levo), ob desnem robu ( prav), v središču (center) ali širina (utemelji). Za slike (tag ) na voljo je tudi poravnava na zgornjo mejo najvišjega elementa v vrstici ( vrh), vzdolž spodnje meje (spodaj), vrednost sredine pa poskrbi, da srednja črta slike sovpada z osnovno črto vrstice.

      Vredno je upoštevati, da uporaba atributa poravnati Ni priporočljivo in bolje je besedilo poravnati s pomočjo CSS.

      Primer uporabe atributov

      Kot primer razmislite o vrstici kode HTML:

      To besedilo je mogoče urejati

      Celotna vrstica ustvari odstavek besedila, ki ga lahko uporabnik ureja v brskalniku.

      Oglejmo si vsak element vrstice.

      - začetno oznako vsebnika, v katerem je shranjen odstavek.

      - zaključna oznaka.

      Med liki > in < besedilo se nahaja To besedilo je mogoče urejati. To je napis zunaj oznak (med njimi), kar pomeni, da bo viden uporabniku, ki odpre stran. Brskalnik ga zazna kot preprosto besedilo, ki ga je treba prikazati na zaslonu.

      contenteditable=”prav” - to je atribut in njegov pomen. Spomnite se, kako v šoli: x=3. Torej tukaj: contenteditable=”prav" Atribut contenteditable določa, ali lahko uporabnik ureja vsebino elementa, vrednost prav, zapisano v narekovajih, ločenih z enačajem, urejanje omogoča:

      Attribute=”value” contenteditable=”true”

      Oblikovanje kaskadnih tabel). Ta jezik obstaja od leta 1996 in se še vedno razvija. Trenutno razvijalci že uporabljajo tretjo različico CSS. Z uporabo programskega jezika CSS je mogoče ustvariti popolnoma lepo in prijetno spletno stran, ki se uporabniku ne bo zdela zastarela ali neprijetna, tudi če JavaScripta sploh ne uporabljate. Sodobne zmogljivosti tretje različice vam to omogočajo.

      Razvijalci lahko uporabijo tudi bolj priročne možnosti oblikovanja, kot sta Flexbox ali Position, da spremenijo lokacijo elementa na spletnem mestu, vendar najprej. Najprej bi morali razumeti prednosti in slabosti lastnosti Float.

      CSS Float - zakaj je potreben?

      Float je lastnost za pozicioniranje elementov. Vsak dan ga je mogoče videti na straneh časopisov in revij, ob pogledu na slike in besedilo, ki zelo lepo teče okoli njih. V svetu kode HTML in CSS bi se moralo isto zgoditi pri uporabi funkcije Float. Vendar si velja zapomniti, da urejanje slik ni vedno glavni namen te funkcije. Uporablja se lahko za ustvarjanje priljubljene razporeditve elementov spletnega mesta v dveh, treh, štirih stolpcih. Pravzaprav se lastnost Float CSS nanaša na skoraj vsak element html. Če poznate osnove urejanja razporeditve elementov s funkcijo Float in nato Property, ustvarjanje katerega koli dizajna spletnega mesta ne bo težko.

      Posebni programi oblikovalcev postavitev lahko včasih ne opazijo slik, ampak gredo nanje. Precej podobne stvari se dogajajo v spletnem oblikovanju, le če upoštevamo, da se besedilo, namesto da bi plezalo na sliko, prikaže (če je lastnost Float napačno uporabljena) zraven ali pod njo, vendar vedno ne tam, kjer ga razvijalec potrebuje.

      Opis lastnosti CSS Float

      Pravzaprav je znanje o uporabi lastnosti Float zelo dober as v rokavu za vsakega spletnega oblikovalca. Toda na žalost lahko pomanjkanje razumevanja, kako ta funkcija deluje, povzroči trke elementov spletnega mesta in druge podobne frustracije. Prej so se podobne situacije dogajale tudi zaradi napak v brskalnikih. Zdaj bo razkrita skrivnost, kako pravilno uporabiti lastnost Float, in s tem ne bi smelo biti več težav.

      Lastnost Float ima štiri vrednosti:

      • Float:inherit;
      • Lebdenje: desno;
      • float:left;
      • Float:none;

      Za tiste, ki znajo angleško, morajo biti vrednosti parametrov lastnosti Float jasne. Toda za tiste, ki ne vedo, je tukaj majhna razlaga. Parameter :levo; Premakne telo elementa v skrajni levi kot nadrejenega elementa. Enako se zgodi (samo v drugo smer) s parametrom bcgjkmpjdfybb :prav;. Pomen :podedovati; pove elementu, naj prevzame enake nastavitve kot njegov nadrejeni element. Takšni elementi se imenujejo tudi podrejeni elementi, saj se nahajajo neposredno znotraj nadrejenega v kodi html. Lastnina :noben; omogoča elementu, da ne moti normalnega poteka dokumenta, je privzeto nastavljen za vse dele kode.

      Kako deluje Float?

      Lastnost Float CSS deluje povsem preprosto. Vse, kar je bilo opisano zgoraj, je mogoče narediti brez večjih težav. Potem bo vse tako preprosto. Toda preden nadaljujemo s preučevanjem lastnosti Float, je vredno razumeti malo teorije. Vsak element spletnega mesta je blok. To lahko enostavno preverite tako, da odprete konzolo v brskalniku Google Chrome s pritiskom na Ctrl + Shift + J. Besedilo, naslov, slika, povezave in vse druge komponente spletnega mesta bodo prikazane v blokih, samo v različnih velikostih. Na začetku vsi ti bloki prihajajo drug za drugim. Kot lahko vidite v spodnjem primeru, si vrstice kode sledijo ena za drugo, zato bodo prikazane strogo ena za drugo.

      To se imenuje normalni pretok. Pri tem toku vsi bloki ležijo drug na drugem (brez sekanja teles elementov) navpično. Na začetku se na ta način nahaja vsa vsebina spletne strani. Ko pa uporabljate na primer jezikovno lastnost CSS Float Left, element zapusti svoj naravni položaj na strani in se premakne skrajno levo. To vedenje neizogibno vodi v trk s tistimi elementi, ki ostanejo v normalnem toku.

      Z drugimi besedami, elementi, namesto da bi bili razporejeni navpično, so zdaj drug poleg drugega. Če ima nadrejeni element dovolj prostora, da lahko v sebi sprejme dva otroka, potem do kolizije ne pride, če pa ne, je prekrivanje enega objekta z drugim neizogibno. To je izjemno pomembno, da si zapomnite, da razumete, kako deluje lastnost CSS Float.

      Jasna funkcija za reševanje težav

      Funkcija Float ima dragega prijatelja - Clear. Skupaj sta - Obe funkciji se dopolnjujeta in osrečujeta razvijalca. Kot je navedeno zgoraj, sosednji elementi izstopijo iz običajnega toka in prav tako začnejo "lebdeti", tako kot element, za katerega je uporabljena lastnost Float (na primer CSS Float Top). Kot rezultat, namesto enega plavajočega elementa dobite dva in sploh ne na mestu, kjer jih je razvijalec nameraval postaviti. Od tega trenutka se začnejo vse težave.

      Funkcija Clear ima pet vrednosti:

      • :levo;
      • :prav;
      • :oboje;
      • :podedovati;
      • nič;

      Po analogiji lahko razumete, kdaj je najbolje uporabiti funkcijo Clear. Če imamo vrstico v kodi Lebdenje: desno;(mišljena je koda CSS), potem bi morala biti funkcija Jasno: prav;. Enako velja za nepremičnine float:left; ga bo dopolnil Počisti: levo;. Pri pisanju kode Jasno: oboje; Izkazalo se je, da bo element, za katerega se uporablja ta funkcija, pod elementi, za katere se uporablja funkcija Float. Podedovanje prevzame nastavitve iz nadrejenega elementa in noben ne spremeni strukture mesta. Če razumete, kako delujeta funkciji Float in Clear, lahko napišete edinstveno in nenavadno kodo HTML in CSS Float, s katero bo vaše spletno mesto edinstveno.

      Uporaba Float za ustvarjanje stolpcev

      Lastnost Float je še posebej uporabna pri ustvarjanju stolpcev na spletnem mestu (ali centriranju vsebine CSS Float na spletni strani). Ta koda je najbolj praktična in priročna, zato je vredno razmisliti o več možnostih za ustvarjanje znane predloge spletnega mesta, sestavljene iz dveh stolpcev. Za primer vzemimo standardno spletno stran z vsebino na levi, navigacijsko vrstico na desni, glavo in nogo. Koda bo takšna:

      Zdaj moramo ugotoviti, kaj tukaj piše. Nadrejeni element, ki vsebuje glavni del kode html, se imenuje vsebnik. Omogoča vam, da preprečite, da bi se elementi, za katere je uporabljena funkcija Float, razpršili v različne smeri. Če tega ne bi bilo, bi ti elementi lebdeli do samih meja brskalnika.

      Nato sta v kodi #content in #navigation. Za te elemente je uporabljena funkcija Float. #vsebina gre na levo, #navigacija pa na desno. To je potrebno za ustvarjanje spletnega mesta z dvema stolpcema. Treba je določiti širino, tako da se predmeti ne prekrivajo. Širina se lahko določi tudi v odstotkih. To je še bolj priročno kot v pikslih. Na primer, 45 % za #content in 45 % za #navigation, preostalih 10 % pa namenite lastnini margine.

      Lastnost Clear, ki se nahaja v #footer, preprečuje, da bi noga sledila #navigation in #content, vendar jo pusti na istem mestu, kjer je bila. Kaj se lahko zgodi? če ne podate lastnosti Clear? V tej kodi se bo #footer preprosto dvignil in končal pod #navigation. To se bo zgodilo, ker ima #navigation dovolj prostora za namestitev še enega elementa. Ta vizualni primer jasno prikazuje, kako se lastnosti Clear in Float dopolnjujeta.

      Težave, na katere lahko naletite pri pisanju kode

      Zgornji primeri so precej preprosti. Toda tudi z njimi se lahko pojavijo težave. Na splošno se s funkcijo Float lahko zgodi veliko nepričakovanih težav. Ne glede na to, kako nenavadno je morda, težave običajno ne nastanejo s CSS, temveč s kodo html. Mesto, kjer se nahaja element s funkcijo Float v html kodi, neposredno vpliva na delovanje slednjega. Da bi se izognili različnim težavam, je najbolje, da se držite preprostega pravila - najprej v kodi postavite elemente s funkcijo Float. To skoraj vedno deluje in zmanjša njihovo nepričakovano vedenje.

      Trk elementov

      Do kolizije pride, ko nadrejeni element, ki vsebuje več otrok, ne more sprejeti vseh in se prekrivajo. Zgodi se celo, da elementi morda niso prikazani, ampak izginejo s spletnega mesta. Ne gre za napako brskalnika, ampak za povsem pričakovano in pravilno obnašanje elementov s funkcijo Float.

      Ker so ti elementi na začetku v normalnem toku in jih nato moti lastnost Float, jih lahko brskalnik odstrani s strani spletnega mesta. Vendar ne obupajte, saj je rešitev preprosta in jasna - uporabite lastnost Cear. Možno je, da je od vseh načinov za rešitev te težave uporaba Clear najučinkovitejša.

      Toda problem kolizije elementov spletne strani je mogoče rešiti na drug način. Obstajata še vsaj dva načina:

      • z uporabo funkcije Position;
      • z uporabo Flexboxa.

      Funkcija Position je včasih dobra alternativa CSS Float. Pri uporabi položaja je najbolje, da slike postavite na sredino spletne strani. Če vrednosti :absolute in :relative uporabite pravilno, se bodo elementi postavili na svoje mesto in se ne bodo prekrivali.

      Razčlenjevanje funkcijske kode Position in Float

      Vredno si je podrobneje ogledati, kako zamenjati Float s Position v kodi HTML in CSS. Pravzaprav je zelo preprosto. Recimo, da obstajata element #container in #div.

      V tem primeru bo uporaba funkcije (CSS Div) Float v drugem vsebniku pomagala ustvariti standardno spletno mesto z dvema stolpcema. Nikoli ne pozabite na funkcijo Clear. Brez tega boste dobili samo elemente, ki se prekrivajo drug na drugega.

      Kako torej spremenite kodo CSS in Float za uporabo Postion? Zelo preprosto:

      položaj:relativni;

      položaj:relativni;

      V tem primeru bosta #container in #div zavzela položaj, ki ga razvijalec potrebuje v nadrejenem elementu. Glavni? postavite #div in #container v en nadrejeni element, ki bo ustrezal njuni velikosti.

      Flexbox – kako bo ta funkcija pomagala nadomestiti CSS Float?

      Flexbox je trenutno najnaprednejši način izdelave spletnih strani, zato te funkcije starejše različice brskalnikov ne podpirajo. Tega dejstva ne smemo zanemariti, saj uporabniki z zastarelimi različicami brskalnikov ne bodo mogli videti pravilne različice spletnega mesta.

      Flexbox ni lastnost, ampak ločen modul. Zato flexbox podpira številne lastnosti, ki delujejo samo z njim. Poleg tega ima funkcija prikaza, ki ima v flexboxu tri parametre inline, block in inline-block, samo še en flex-flow.

      Kako deluje Flexbox?

      Ta tehnologija bo razvijalcu pomagala enostavno vodoravno in navpično poravnati elemente. Flexbox lahko spremeni tudi smer in vrstni red, v katerem so prikazani elementi. Ta tehnologija ima dve osi: glavno os in prečno os, okoli katerih je zgrajen celoten Flexbox. Odstrani tudi učinek funkcij Float in Clear. Svoj sistem gradi v kodi, v kateri uporablja lastnosti, ki so edinstvene zanj, tako da na žalost ne bo mogoče podvojiti drugih lastnosti, kot sta Float in Position, v elementih. In to bi bilo zelo koristno, saj, kot je navedeno zgoraj, Flexbox deluje samo v novih različicah brskalnikov.

      Ne smemo pozabiti, da na koncu Position, Flexbox in Float naredijo isto stvar – ustvarijo nenavaden in izviren dizajn za vaše spletno mesto. Vsaka možnost, obravnavana v članku, to počne na svoj način in ima zato tako prednosti kot slabosti. Poleg tega se zgodi, da je nekje funkcija Float popolna (na primer na spletnem mestu s preprosto strukturo), nekje pa je bolje uporabiti Position ali Flexbox.

      Napaka z dvojnim robom

      Vendar pa ima včasih na žalost vsak razvijalec težave, povezane ne s pisno kodo, temveč z napakami v določeni vrsti brskalnika. V Internet Explorerju je na primer napaka, imenovana napaka z dvojnim robom. Parameter Margin pomnoži z dvema, kar povzroči premik elementov spletnega mesta izven meja brskalnika. Da bi se temu izognili, samo določite parameter Margin kot odstotek. Običajno se ta napaka pojavi, ko se vrednosti lastnosti Margin in Float ujemata.

      margin-left:10px;

      Ta koda bo premaknila element v Internet Explorerju za 20 px v levo. Kodo lahko spremenite takole:

      rob-levo:10 %;

      ali tako,

      margin-desno:10px;

      Obe možnosti bosta rešili problem premikanja elementov.

      Napake v brskalniku in nepravilen prikaz strani

      Ne smemo pozabiti, da Internet Explorer ni edini brskalnik, v katerem se lahko pojavijo napake. Starejši različici brskalnikov Google Chrome in Mozilla prav tako nepravilno prikazujeta nekatere elemente sodobnih spletnih mest. Za vsako od teh napak je mogoče najti rešitev. Na splošno bi rad opozoril, da bo uporaba Floata ustvarila izvirno in privlačno zasnovo spletnega mesta. Razumevanje osnov in načel delovanja te lastnosti vam bo pomagalo preprečiti napake in olajšalo življenje vsakemu razvijalcu.

      Opis

      Lastnost CSS float vam omogoča, da naredite element lebdeč tako, da ga premaknete na levi ali desni rob nadrejenega elementa, odvisno od nastavljene vrednosti. Če plavajoči element nima eksplicitno nastavljene širine, je stisnjen po širini, da se prilega vsebini.

      Brskalnik obdeluje kodo HTML dokumenta, ki se premika od zgoraj navzdol, ko obdelava kode doseže lebdeči element, ga brskalnik postavi na prvo mesto glede na potek dokumenta, tj. pod elementom, kjer se nahaja v kodi dokumenta, nato odstrani plavajoči element iz običajnega toka in ga premakne čim bolj na levi ali desni rob nadrejenega elementa:

      Ker je bil lebdeči element odstranjen iz toka dokumenta, so preostali elementi bloka, ki se nahajajo v kodi za njim, premaknjeni na svoje mesto, kot da elementa nikoli ne bi bilo.

      Čeprav je bil lebdeči element odstranjen iz običajnega toka, to še vedno vpliva na vsebino v vrstici. Za razliko od blokovnih elementov, vgrajena vsebina, ki je umeščena v kodo za plavajočim elementom, upošteva njegove obrobe in se ovije okoli njega, kar pomeni, da se besedilo ovije okoli plavajočega bloka:

      Namesto lebdečega bloka z besedilno vsebino lahko naredite lebdečo sliko. V tem primeru se bo besedilo ovilo okoli slike:

      Ime dokumenta

      Z uporabo lastnosti CSS float je bila slika narejena tako, da lebdi na levi strani. Besedilo, ki se nahaja v kodi HTML pod sliko, se bo ovilo okoli slike na desni in spodnji strani.

      Poskusite »

      V isto vrstico lahko postavite več kot en plavajoči element, če širina nadrejenega elementa to dopušča. Če nadrejeni element ni dovolj širok, bodo lebdeči elementi, ki se ne prilegajo v linijo z drugimi lebdečimi elementi, potisnjeni navzdol.

      Plavajoči elementi ne vplivajo na višino nadrejenega elementa, to pomeni, če obstaja vsebnik in vsebuje samo plavajoče elemente, bo višina vsebnika enaka nič. To težavo lahko rešite na naslednje načine:

      1. Nastavite fiksno višino – v primerih, ko veste, kakšna mora biti višina posode.
      2. Za vsebnik uporabite lastnost overflow z vrednostjo auto ali hidden, nato pa bodo pri izračunu višine vsebnika upoštevani lebdeči elementi. To metodo lahko uporabimo, kadar vnaprej ni znano, kakšna mora biti višina posode.

      Lastnost float deluje samo na blokovnih elementih, tako da če je lastnost float uporabljena za elemente nekega drugega tipa, se ti pretvorijo v blokovni tip.

      Opomba: Absolutni in fiksno pozicionirani elementi ne upoštevajo lastnosti float. Prav tako lastnost float nima vpliva na flexboxe.