Računi 

Float i clear u CSS-u su alati za raspored koji se temelje na blokovima. HTML atributi: vrste i primjena. HTML referenca Generička klasa clearfix

Pozdrav, dragi čitatelji bloga! Nakon vrlo značajne pauze, odlučio sam nastaviti s temom proučavanja CSS-a i današnji članak bit će posvećen stvaranju plutajućih elemenata pomoću float-a, koristeći praktične primjere pogledat ćemo učinak ovog pravila, zajedno sa svojstvom clear, za stvaranje stupaca i horizontalni izbornik.

Za neupućene, mislim da bi bilo bolje započeti čitanjem drugih materijala na kaskadnim listovima stilova. Dopustite mi da vas podsjetim da su svi članci na ovu temu u odjeljku gdje možete dobiti potrebne informacije.

Plutajući elementi također se nalaze u HTML-u kada je potrebno stvoriti omotač teksta oko istih slika (atribut poravnanja img oznake s lijevim i desnim parametrima). Stoga je ovaj aspekt prilično popularan kada se razvija sadržaj web stranice.

Kroz današnju publikaciju ćemo analizirati float (lijevo, desno, ništa) i akcije jasnih pravila uključujući u odnosu na, koji su osnova za raspored blokova. Naravno, u sadašnjoj fazi velika većina koristi progresivni CMS (osobito WordPress) pri izradi web stranice. Ipak, vjerujte da će vam poznavanje osnova stilova i jezika za označavanje hiperteksta dobro poslužiti u budućnosti.

Kako stvoriti plutajuće elemente u CSS-u koristeći float

Za početak, dopustite mi da vas podsjetim da su u normalnom tijeku web elementi raspoređeni na web stranici u strogom skladu s redoslijedom navedenim u kodu. Međutim, kao što znate, uvijek postoje iznimke. To je logično jer je za rješavanje nestandardnih problema potrebna poluga.

Jedan od tih alata je npr. o kojem više možete pročitati na navedenoj poveznici. Pa, još jedno sredstvo za promjenu redoslijeda standardnog prikaza web elemenata je float pravilo.

Podaci o bilo kojem CSS svojstvu (propety) i njegovim vrijednostima mogu se pronaći na W3C specifikacijskoj stranici, gdje su dane potpune informacije (podaci za drugu verziju listova stilova, ali to vrijedi i za CSS3, koji je već službeno u sila, iako nije u potpunosti razvijena):


Kao što vidite, float može uzeti jedan od tri moguća parametra (lijevo, desno, nijedan) i (naslijediti). float nijedan parametar primjenjuje se prema zadanim postavkama i znači da će elementi biti prikazani redoslijedom koji slijedi normalni tok. Ali desno ili lijevo omogućuju vam stvaranje plutajućih blokova s pomakom udesno ili ulijevo.

Ako se sjećate, oni koji se najčešće koriste ponašaju se drugačije (općenito, vrsta prikaza svih elemenata implementirana je pomoću CSS-a pomoću svojstva Display). Blokirani zauzimaju cijelu dostupnu širinu osim ako nije navedena vrijednost širine. Visina je određena sadržajem ako parametar visine nije naveden.

Inline oznake se postavljaju u jedan redak i premještaju u drugi samo ako ponestane dostupnog prostora za širinu. U normalnom slučaju, nemoguće je odrediti njihovu visinu i širinu. Na temelju ovih podataka, pogledajmo konkretan primjer.

Radi jasnoće, uključimo CSS pravila (ova se metoda obično rijetko koristi u praksi, ali je vrlo prikladna za testiranje).

Kako bismo bili sigurni da je gore navedeno točno, uzmimo dvije ugrađene oznake, navodeći svojstva širine i visine za njih, kao i jednu blok oznaku. Kako bismo osigurali jasnoću, postavimo nijanse boja za svaki blok pomoću pozadine (možete učiniti isto):

Umetnuti element 1 Umetnuti element 2

Blok element

Rezultirajuća slika bit će sljedeća:

Kao što vidite, dobili smo praktičnu potvrdu da navedena visina (height:50px) i širina (width:450px) ne rade u normalnim uvjetima za oznaku SPAN, koja je ugrađena. Zatim pokušajmo postaviti svojstvo float right za prvi ugrađeni web element i svojstvo float left za drugi:

Umetnuti element 1 Umetnuti element 2

Blok element

Kao rezultat dobivamo:


Sasvim je očito da u ovom slučaju prvi i drugi web element postaju plutajući (jedan se pomaknuo skroz ulijevo, drugi udesno). Osim toga, dobili su širinu i visinu, koje su navedene u CSS stilovima.

Štoviše, web elementi definirani ugrađenom oznakom SPAN različito komuniciraju sa susjednim DIV spremnikom. Ako dodatno uklonimo, recimo, atribut širine iz stilova obje SPAN oznake, tada će njihova širina biti određena sadržajem (u našem slučaju duljinom teksta s nazivima elemenata):

Sada sadržaj DIV bloka počinje teći desno od web elementa s float: lijevo. Ima smisla jasnije se upoznati s rezultatima konkretnih praktičnih istraživanja na ovoj web stranici, gdje možete sami pokušati promijeniti područje gledanja i promatrati kako se blokovi ponašaju jedan u odnosu na drugi:


Da rezimiramo, definirajmo neke značajke koje će biti svojstvene spremniku s jednom ili onom vrijednošću svojstva float (desno ili lijevo):

  • Element je pomaknut prema lijevom ili desnom rubu;
  • Postaje blokiran bez obzira što je bio prije;
  • Ponaša se kao da susjedni blok web elementi (s pravilom display:block) ne postoje. To možete provjeriti ako još jednom pogledate snimke zaslona ovog odjeljka članka;
  • U isto vrijeme, ugrađene oznake (display:inline) omotat će se oko plutajućih blokova. Ako ponovno pogledate prethodni snimak zaslona, ​​primijetit ćete da se sadržaj spremnika DIV ("Element bloka") omotava oko SPAN s float:left na desnoj strani.
  • Ako eksplicitno ne navedete širinu plutajućeg bloka (u našem primjeru, width:450px), tada će ona biti određena njegovim sadržajem;

U ovom smo primjeru pogledali glavne značajke plutajućih blokova s ​​različitim parametrima svojstava float i odabrali unutarnje i blokove web elemenata (s različitim vrijednostima prikaza) kako bismo zakomplicirali zadatak. Da biste ojačali materijal, svakako pogledajte informativni video E. Popova:

Kako napraviti horizontalni izbornik koristeći CSS (float)

Zatim ćemo analizirati vrlo specifičan zadatak stvaranja horizontalnog izbornika pomoću plutajućih blokova, koji se vrlo često koristi u razvoju web stranica. Prvo, konstruirajmo jedan, čiji će kod izgledati ovako:

  • Stavak 1
  • Točka 2
  • Točka 3
  • točka 4
  • točka 5

      • Dobivamo nešto poput ovoga:

      Sada malo uredimo dobiveni izbornik pomoću CSS svojstava: uklonite markere nasuprot svake stavke koristeći list-style none, pretvorite mala slova u blok primjenom pravila bloka prikaza na njih, a također, radi raznolikosti, dajte svakoj od njih lijepu pozadinu .

      Također bi bilo dobro postaviti marginu za daljnje poboljšanje dizajna laganim odmicanjem stavki izbornika jednu od druge. Za web stranice WordPress stranice možete postaviti UL oznaku "izbornik", za koju navedete potrebne stilove u STYLE.CSS datoteci:

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

      U ovom slučaju, namjerno ne koristim atribut STYLE jer bi me prisilio da specificiram ista CSS svojstva više puta za svaku oznaku LI. Kao rezultat naših radnji, izbornik će izgledati ovako:


      Razlika u odnosu na prethodnu verziju je nevjerojatna, zar ne? Sada imamo sliku koja puno više sliči klasičnom jelovniku. Istina, točke u njemu nisu smještene vodoravno, već okomito. Da biste u potpunosti riješili problem, trebate dodati svojstvo float left u HTML element popisa LI; potpuno CSS pravilo za to će biti ovako:

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

      Kao rezultat toga, izbornik će se pretvoriti u horizontalnu verziju:


      Mislim da na temelju gore navedenih informacija razumijete razlog zašto je došlo do takve metamorfoze. Svaki web-element izbornika s lebdenjem u lijevo vođen je lokacijom spremnika, njegovim granicama i pokušava zauzeti prostor pomicanjem što je više moguće prema gore i ulijevo. To se dogodilo s blokom "Točka 1", koji je bio pozicioniran u skladu s tim.

      “Item 2” se također pomaknuo ulijevo, ali je njegovo daljnje kretanje blokirao prvi web element izbornika. I tako dalje. Kao rezultat, dobili smo horizontalni sekvencijalni lanac svih komponenti izbornika. Sve detalje možete vidjeti i sami. Pokušajmo sada umjetno smanjiti širinu prozora:

      U slučaju da plutajući element ne nađe mjesto na vrhu, zauzima okomitu poziciju najviše pozicije u donjem redu i pomiče se u krajnju lijevu poziciju. U praksi se često događa da naziv pojedine stavke može biti duži i ne uklapa se u standardne granice. Ako je ovo prva stavka, tada cijeli izbornik može izgledati ovako:

      U ovom slučaju, "Stavka 4" prvo uzima u obzir najvišu gornju granicu, a tek onda se pomiče na krajnju lijevu poziciju, ali nailazi na prvi web element. Ako se visina, recimo, treće točke pokaže većom, tada se slika mijenja ovako:

      Tada će “Stavka 3” poravnati svoj položaj s donjim rubom zadnjeg web elementa u gornjem retku i tek tada se pomaknuti ulijevo. Svi gore opisani pokreti trebali bi vam pomoći da shvatite bit učinka lebdenja na raspored web elemenata na stranici.

      Ako se slični problemi pojave u praktičnom rasporedu, tada umjesto svojstva CSS float možete koristiti druge metode za stvaranje horizontalnog izbornika. No, to je posebna tema kojoj ćemo se svakako posvetiti u budućnosti.

      Učinak primjene svojstva jasno (oboje, lijevo, desno).

      Sada da vidimo kako iskoristiti značajke plutajućih elemenata u svoju korist, ali u isto vrijeme prisiliti sljedeće blokove na web stranici da uzmu u obzir njihov položaj i veličinu. To se može postići pomoću jasnog pravila. Opet, sve informacije mogu se dobiti iz izvornog izvora (W3C konzorcij):


      Pravilo CSS clear ima četiri moguće vrijednosti, pri čemu je svojstvo none zadano, što je prirodno jer osigurava standardni protok koda. Također jasno (nijedan, lijevo, desno, oboje) nasljeđuje se od nadređene oznake (nasljeđuje).

      Bit ovog pravila, napisanog za određeni blok, jest poništiti radnju ovisno o njezinoj vrijednosti:

      • nijedan - poništava učinak samog svojstva clear, kao rezultat toga, sadržaj oznake (na primjer, tekst) omotava se oko web elementa u skladu sa stilovima navedenim za njega u obliku float;
      • lijevo i desno - eliminira protok oko lijevog, odnosno desnog ruba;
      • oboje - sprječava strujanje i desno i lijevo. Ovo je najčešća vrijednost clear-a u praktičnoj uporabi.

      Ne možete ništa razumjeti? Shvaćate li značenje nejasno i samo intuicijom? Ništa, nakon što pogledamo jasan primjer, mislim da će sve doći na svoje mjesto. Da bismo to učinili, postavimo zadatak: postavimo dva bloka vodoravno jedan pored drugog i na dno stavimo tekst. Ovaj dizajn je prilično uobičajen u rasporedu.

      Dakle, uzmimo dva DIV spremnika, koji shematski mogu predstavljati 2 stupca. Napišimo CSS svojstva za njih, uključujući fiksna širina(širina), boja pozadine i njihovo pretvaranje u float koristeći float lijevo. Dodajmo im tekst, zatvoren u oznaku P, koja je, kao što znate, mala slova:

      Lijevi stupac
      Desni stupac

      DIV-ovi će se poredati u vodoravni red, pri čemu će prvi biti što je moguće više lijevo. A drugi će se parkirati do svog desnog ruba (za njega će to biti mjesto lijevo), i neće dopustiti prvom divu da se pomakne dalje. Ali tekst će nastaviti ovaj red, jer ukupna širina to dopušta:

      Kao što razumijete, u ovoj situaciji naš se zadatak ne može smatrati dovršenim. Prvo, kada se okvir za prikaz sužava za iznos manji od ukupne širine divova, desni stupac skače prema dolje a nalazi se ispod lijeve. Drugo, sadržaj trećeg web elementa s tekstom nalazi se pored, a ne na dnu stupaca:


      Opet, sami možete vidjeti kako se svi elementi ponašaju, umjetno sužavajući i proširujući područje gledanja. Kako bismo uklonili opisane nedostatke, dodat ćemo spremnik s CSS svojstvima iu njega smjestiti sve postojeće slojeve. Također ćemo dodati dodatni prazan DIV s pravilom CSS clear both kako bismo spriječili da sadržaj donjeg bloka (tekst) teče oko stupaca s desne i lijeve strane:

      Lijevi stupac
      Desni stupac

      Napominjemo da stilovima velikih diva I dodana margina:0 automatsko pravilo, koji se može koristiti za centriranje posude. Rezultirajući prikaz izgledat će ovako:


      Sada je naš problem riješen, budući da rezultat zadovoljava postavljene uvjete: dva stupca se nalaze u vodoravnom redu, a sadržaj web elementa ispod koda (TEKST) ostat će čvrsto na svom pravom mjestu ispod stupaca.

      Ako se smanji širina područja za gledanje, dizajn će ostati u svom izvornom obliku (i doći će do horizontalnog pomicanja), što možete provjeriti odlaskom na odgovarajuću web stranicu s rješenjem ovog primjera. Kao dodatak, pogledajte video Evgenija Popova, koji daje primjer označavanja web stranice pomoću float i clear:

      Određuje na koju će stranu element biti poravnat, dok će drugi elementi teći oko njega s druge strane. Kada je float postavljen na none, element se prikazuje na stranici kao i obično, s najviše jednim redom teksta koji se prelama u istom retku kao i sam element.

      Sintaksa

      plovak: lijevo | desno | nikakav

      Argumenti

      lijevo Poravnava element ulijevo, a svi ostali elementi, poput teksta, teku oko njega udesno. desno Poravnava element udesno, sa svim ostalim elementima koji ga okružuju ulijevo. none Omotanje elementa nije postavljeno.





      plutati



      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 postavlja s koje strane elementa drugi elementi ne smiju omotati oko njega. Ako postavite element da pluta pomoću parametra float, svojstvo clear nadjačava ga za navedene strane.
    • clip definira područje pozicioniranog elementa u kojem će biti prikazan njegov sadržaj. Sve što ne stane u ovo područje bit će izrezano i postati nevidljivo. Trenutno je jedini dostupan oblik područja pravokutnik.
    • display je višenamjenski atribut koji određuje kako bi element trebao biti prikazan u dokumentu.

      • Već smo shvatili. Saznali smo da imaju sadržaj. Međutim, to nije sve. Oznake također imaju atribute koji povećavaju njihove mogućnosti, a atributi zauzvrat imaju vrijednosti. Uz njihovu pomoć možete postaviti parametre za element i odrediti stil dizajna. Na primjer, s oznakom

      označili ste odlomak. Ali kako ga poravnati udesno? Da biste to učinili, trebat će vam određeni atribut s odgovarajućom vrijednošću. Baš kao što neke oznake nemaju par, neki se atributi mogu koristiti bez vrijednosti.

      Kako napisati atribute?

      Atributi su rezervirane riječi (poput oznaka, samo bez uglastih zagrada), ali njihova značenja mogu biti različita. Baš kao i oznake, preporuča se pisati atribute s vrijednostima malim slovima, iako preglednici, općenito, ne mare - ovo je samo pravilo lijepog ponašanja: na ruskom se NE KORISTI DA SE PIŠE KADA CAPS LOCK JE OMOGUĆEN. Zašto je HTML lošiji?

      Vrijednosti atributa napisane su u sljedećem formatu:

      Attribute=”value” lang=”en”

      Uvijek biste trebali pisati atribute unutar uvodne oznake, nakon rezervirane riječi.

      stavak

      Obično postoji više atributa dostupnih za jednu oznaku. Nije bitno kojim su redoslijedom navedeni.

      Univerzalni atributi

      Svaka HTML oznaka ima vlastiti skup atributa. Neki atributi mogu biti dostupni za više oznaka, dok drugi mogu raditi samo s jednom. Također postoji grupa univerzalnih (globalnih) atributa koji se mogu koristiti s bilo kojom oznakom. Pogledajmo ukratko atribute ove kategorije.

      • pristupni ključ omogućuje vam postavljanje prečaca na tipkovnici za pristup određenom objektu stranice. Na primjer, možete koristiti tipkovni prečac za Alt+1 korisnik je slijedio određenu poveznicu. Stoga razvijte ključni navigacijski sustav.

      Vrijednost atributa može biti brojevi 0-9 ili slova latinične abecede:

      Link će se otvoriti pritiskom na kombinaciju tipki s jedan

      • razreda omogućuje vam povezivanje oznake s unaprijed definiranim dizajnom pomoću CSS-a. Korištenje atributa omogućuje vam značajno smanjenje koda, jer umjesto opetovanog unosa istog CSS bloka, možete jednostavno unijeti naziv odgovarajuće klase.
      • Pomoću sadržajno uređivanje možete dopustiti korisniku da uređuje bilo koji element HTML stranice: brisanje, umetanje, promjena teksta. Isti atribut omogućuje uređivanje i onemogućavanje. Ima samo dva značenja: pravi- dopustiti uređivanje, lažno- zabraniti.
      • Korištenje atributa kontekstni izbornik Bilo kojem elementu dokumenta možete dodijeliti jedinstvene stavke kontekstnog izbornika po vlastitom nahođenju. Sam meni je kreiran u tagu , a atribut contextmenu dobiva svoj identifikator.
      • red određuje smjer teksta: slijeva nadesno (ltr) ili s desna na lijevo (rtl).
      • povlačeći se omogućuje vam zabranu (lažno) ili dopustiti (pravi) korisnik može povući i ispustiti element stranice koji ima ovaj atribut.
      • pad zona govori pregledniku što treba učiniti s povučenim elementom: copy(value kopirati), premjestiti ( potez) ili izradite poveznicu na njega (veza).
      • skriven- atribut koji vam omogućuje skrivanje sadržaja elementa tako da se ne prikazuje u pregledniku. Ako je atribut postavljen na false, objekt se prikazuje, true - skriven je.
      • iskaznica specificira identifikator elementa - vrstu imena koje je potrebno za jednostavnu promjenu stila objekta, kao i da mu skripte mogu pristupiti. Vrijednost atributa bit će njegovo ime. Mora započeti latiničnim slovom, a može sadržavati brojke, slova iste latinske abecede (velika i mala), kao i crtice (-) i podvlake (_) . Ne može sadržavati ruska slova.
      • jezik pomaže pregledniku razumjeti na kojem je jeziku sadržaj napisan i stilizirati ga u skladu s tim (na primjer, jezici mogu koristiti različite navodnike). Vrijednosti su jezični kodovi (ruski - ru, Engleski - hr i tako dalje.).
      • Provjera pravopisa uključuje (pravi) ili onemogućuje (lažno) Provjera pravopisa. Posebno je korisno koristiti atribut u oznakama polja obrasca gdje će korisnik unositi tekst.
      • stil omogućuje postavljanje dizajna elementa pomoću CSS koda.
      • tabindex omogućuje određivanje koliko će puta korisnik morati pritisnuti tipku Tab da objekt s ovim atributom primi fokus. Broj klikova određuje vrijednost atributa - prirodni broj.
      • titula- tooltip koji se pojavljuje ako pomaknete miš na element i ostavite ga neko vrijeme nepomičan. Crta u značenju bit će nagovještaj.
      • Prevedi dopušta (Da) ili zabranjuje (Ne) prijevod sadržaja oznake.
      • uskladiti postavlja poravnanje elementa. Na primjer, možete ga koristiti za poravnavanje teksta ulijevo (vrijednost lijevo), uz desni rub ( pravo), u središtu (centar) odnosno širine (opravdati). Za slike (tag ) također je dostupno poravnanje prema gornjoj granici najvišeg elementa u retku ( vrh), uz donju granicu (dno), a vrijednost middle čini da se srednja linija slike podudara s osnovnom linijom retka.

      Vrijedno je imati na umu da korištenje atributa uskladiti Nije preporučljivo, a bolje je poravnati tekst pomoću CSS-a.

      Primjer korištenja atributa

      Kao primjer, razmotrite redak HTML koda:

      Ovaj tekst se može uređivati

      Cijeli redak stvara odlomak teksta koji korisnik može uređivati ​​u pregledniku.

      Pogledajmo svaki element linije.

      - početna oznaka spremnika koji pohranjuje odlomak.

      - završna oznaka.

      Između likova > I < tekst se nalazi Ovaj tekst se može uređivati. Ovo je natpis izvan oznaka (između njih), što znači da će biti vidljiv korisniku koji otvori stranicu. Preglednik ga doživljava kao jednostavan tekst koji treba prikazati na ekranu.

      sadržajno uređivanje=”pravi” - ovo je atribut i njegovo značenje. Sjeti se kako u školi: x=3. Pa ovdje: sadržajno uređivanje=”pravi" Atribut sadržajno uređivanje određuje može li korisnik uređivati ​​sadržaj elementa, vrijednost pravi, napisano pod navodnicima odvojenim znakom jednakosti, uređivanje dopušta:

      Attribute=”value” contenteditable=”true”

      Formatiranje kaskadnih tablica). Ovaj jezik postoji od 1996. godine i još uvijek se razvija. U ovom trenutku programeri već koriste treću verziju CSS-a. Pomoću programskog jezika CSS moguće je izraditi potpuno lijepu i ugodnu web stranicu koja korisniku neće djelovati zastarjelo ili nezgodno, čak i ako uopće ne koristite JavaScript. Moderne mogućnosti treće verzije omogućuju vam da to učinite.

      Programeri također mogu koristiti prikladnije opcije oblikovanja, kao što su Flexbox ili Position za promjenu lokacije elementa na web mjestu, ali prvo na redu. Prvo, trebali biste razumjeti prednosti i nedostatke svojstva Float.

      CSS Float - zašto je potreban?

      Float je svojstvo za pozicioniranje elemenata. Svaki dan ga se može vidjeti na stranicama novina i časopisa, gledajući slike i tekst koji vrlo uredno teče oko njih. U svijetu HTML i CSS koda, ista bi se stvar trebala dogoditi kada koristite funkciju Float. Ali vrijedi zapamtiti da uređivanje slika nije uvijek glavna svrha ove funkcije. Može se koristiti za stvaranje popularnog rasporeda elemenata stranice u dva, tri, četiri stupca. Zapravo, svojstvo Float CSS primjenjuje se na gotovo svaki html element. Poznavajući osnove uređivanja rasporeda elemenata pomoću funkcije Float, a zatim Property, izrada bilo kojeg dizajna web stranice neće biti teška.

      Posebni programi dizajnera izgleda ponekad mogu ne primijetiti slike, ali idu iznad njih. Dosta se slične stvari događaju i u web dizajnu, samo što se tekst, umjesto da se penje na sliku, prikazuje (ukoliko se svojstvo Float neispravno koristi) pored nje ili ispod nje, ali uvijek ne tamo gdje programer treba.

      Opis svojstva CSS Float

      Zapravo, znati kako koristiti svojstvo Float vrlo je dobar as u rukavu za svakog web dizajnera. No, nažalost, nedostatak razumijevanja kako ova funkcija radi može dovesti do sudara elemenata stranice i drugih sličnih frustracija. Ranije su se slične situacije događale i zbog grešaka u preglednicima. Sada će biti otkrivena tajna kako pravilno koristiti svojstvo Float i s tim više ne bi trebalo biti problema.

      Svojstvo Float ima četiri vrijednosti:

      • Float:naslijediti;
      • Plutanje: desno;
      • float:lijevo;
      • Float:nema;

      Za one koji znaju engleski, vrijednosti parametara svojstva Float trebaju biti jasne. Ali za one koji ne znaju, evo malo objašnjenje. Parametar :lijevo; Premješta tijelo elementa u krajnji lijevi kut nadređenog elementa. Ista stvar se događa (samo u drugom smjeru) s parametrom bcgjkmpjdfybb :pravo;. Značenje :naslijediti; govori elementu da preuzme iste postavke kao njegov roditelj. Takvi elementi se također nazivaju podređeni elementi, budući da se nalaze izravno unutar roditelja u html kodu. Vlasništvo :nema; omogućuje elementu da ne ometa normalan tijek dokumenta, postavljen je prema zadanim postavkama za sve dijelove koda.

      Kako radi Float?

      Svojstvo Float CSS radi vrlo jednostavno. Sve što je gore opisano može se učiniti bez većih poteškoća. Tada će sve biti jednako jednostavno. Ali prije nego što nastavimo proučavati svojstvo Float, vrijedi razumjeti malo teorije. Svaki element web stranice je blok. To možete jednostavno provjeriti otvaranjem konzole u pregledniku Google Chrome pritiskom na Ctrl + Shift + J. Tekst, naslov, slika, poveznice i sve ostale komponente stranice bit će prikazane u blokovima, samo u različitim veličinama. U početku svi ti blokovi dolaze jedan za drugim. Kao što možete vidjeti u donjem primjeru, linije koda slijede jedna drugu, tako da će biti prikazane strogo jedna za drugom.

      To se zove normalan protok. S ovim tokom, svi blokovi leže jedan na drugom (bez presijecanja tijela elemenata) vertikalno. U početku se sav sadržaj web stranice nalazi na ovaj način. Ali kada koristite, na primjer, svojstvo jezika CSS Float Left, element napušta svoju prirodnu poziciju na stranici i pomiče se krajnje lijevo. Ovakvo ponašanje neizbježno dovodi do sudara s onim elementima koji ostaju u normalnom toku.

      Drugim riječima, elementi, umjesto okomito raspoređeni, sada su jedan do drugoga. Ako roditeljski element ima dovoljno prostora da u sebe može smjestiti dva djeteta, tada ne dolazi do sudara, ali ako nema, tada je preklapanje jednog objekta s drugim neizbježno. Ovo je iznimno važno zapamtiti kako biste razumjeli kako funkcionira svojstvo CSS Float.

      Jasna funkcija za rješavanje problema

      Funkcija Float ima dragog prijatelja - Clear. Zajedno oni - Obje ove funkcije nadopunjuju jedna drugu i čine razvojnog programera zadovoljnim. Kao što je gore navedeno, susjedni elementi izlaze iz svog normalnog toka i također počinju "lebdjeti", baš kao i element na koji se primjenjuje svojstvo Float (na primjer, CSS Float Top). Kao rezultat toga, umjesto jednog plutajućeg elementa, dobivate dva, a ne na mjestu gdje ih je programer namjeravao postaviti. Od ovog trenutka počinju svi problemi.

      Funkcija Clear ima pet vrijednosti:

      • :lijevo;
      • :pravo;
      • :oba;
      • :naslijediti;
      • nijedan;

      Analogno tome, možete razumjeti kada je najbolje koristiti funkciju Clear. Ako imamo liniju u kodu Plutanje: desno;(Misli se na CSS kod), tada bi funkcija trebala biti Jasno: desno;. Isto vrijedi i za svojstva float:lijevo;će ga nadopuniti Jasno:lijevo;. Prilikom pisanja koda Jasno: oboje; Ispada da će element na koji se primjenjuje ova funkcija biti ispod elemenata na koje se primjenjuje funkcija Float. Nasljeđivanje preuzima postavke od nadređenog elementa i nijedan ne mijenja strukturu web-mjesta. Razumijevajući kako funkcioniraju funkcije Float i Clear, možete napisati jedinstven i neobičan HTML i CSS Float kod koji će vašu web stranicu učiniti jedinstvenom.

      Korištenje float za stvaranje stupaca

      Svojstvo Float posebno je korisno pri stvaranju stupaca na web stranici (ili centriranju CSS Float sadržaja na web stranici). Upravo je ovaj kod najpraktičniji i najprikladniji, pa je vrijedno razmotriti nekoliko opcija za stvaranje poznatog predloška web mjesta koji se sastoji od dva stupca. Na primjer, uzmimo standardnu ​​web stranicu sa sadržajem na lijevoj strani, navigacijskom trakom na desnoj strani, zaglavljem i podnožjem. Kod će biti ovakav:

      Sada moramo shvatiti što je ovdje napisano. Nadređeni element, koji sadrži glavni dio html koda, naziva se spremnik. Omogućuje vam da spriječite raspršivanje elemenata na koje je primijenjena funkcija Float u različitim smjerovima. Da ga nema, ti bi elementi plutali do samih granica preglednika.

      Zatim, u kodu postoje #sadržaj i #navigacija. Na ove elemente primjenjuje se funkcija Float. #sadržaj ide lijevo, a #navigacija desno. Ovo je neophodno za izradu stranice s dva stupca. Potrebno je odrediti širinu kako se objekti ne bi preklapali. Širina se može odrediti i kao postotak. Ovo je još praktičnije nego u pikselima. Na primjer, 45% za #content i 45% za #navigation, a preostalih 10% dajte svojstvu margine.

      Svojstvo Clear, koje se nalazi u #footer, sprječava podnožje da prati #navigaciju i #content, ali ga ostavlja na istom mjestu gdje je i bilo. Što se može dogoditi? ako ne navedete svojstvo Clear? U ovom kodu, #footer će jednostavno ići gore i završiti ispod #navigation. To će se dogoditi jer #navigation ima dovoljno prostora za smještaj još jednog elementa. Ovaj vizualni primjer jasno pokazuje kako se svojstva Clear i Float međusobno nadopunjuju.

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

      Gornji primjeri su prilično jednostavni. Ali i s njima se mogu pojaviti problemi. Općenito, zapravo, s funkcijom Float može se dogoditi mnogo neočekivanih problema. Koliko god čudno bilo, problemi obično ne nastaju s CSS-om, već s html kodom. Mjesto gdje se element s funkcijom Float nalazi u html kodu izravno utječe na rad potonjeg. Kako biste izbjegli razne poteškoće, najbolje je pridržavati se jednostavnog pravila - prvo u kodu postavite elemente s funkcijom Float. To gotovo uvijek funkcionira i smanjuje njihovo neočekivano ponašanje.

      Sudar elemenata

      Do sudara dolazi kada roditeljski element koji sadrži više djece ne može ih sve primiti i oni se međusobno preklapaju. Čak se događa da se elementi ne prikazuju, ali nestaju sa stranice. Ovo nije greška preglednika, već sasvim očekivano i ispravno ponašanje elemenata s funkcijom Float.

      Budući da su ti elementi u početku u normalnom toku, a zatim ih poremeti svojstvo Float, preglednik ih može ukloniti sa stranice web-mjesta. Ipak, nemojte očajavati, jer rješenje je jednostavno i jasno - koristite svojstvo Cear. Moguće je da je od svih načina za izlazak iz ovog problema korištenje Cleara najučinkovitije.

      Ali problem kolizije elemenata web stranice može se riješiti na drugi način. Postoje barem još dva načina:

      • korištenje funkcije Position;
      • koristeći Flexbox.

      Funkcija Položaj ponekad je dobra alternativa CSS Float. Kada koristite položaj, najbolje je postaviti slike u središte web stranice. Ako ispravno primijenite vrijednosti:absolute i:relative, elementi će doći na svoje mjesto i neće se preklapati.

      Analiza koda funkcije Position i Float

      Vrijedno je pobliže pogledati kako zamijeniti Float s Position u HTML i CSS kodu. Zapravo je vrlo jednostavno. Recimo da postoji #container i #div element.

      U ovom primjeru, korištenje funkcije (CSS Div) Float u drugom spremniku pomoći će u stvaranju standardne stranice s dva stupca. Nikad ne zaboravite na funkciju Clear. Bez toga ćete samo dobiti elemente postavljene jedan na drugi.

      Dakle, kako promijeniti svoj CSS i Float kod da biste koristili Postion? Jako jednostavno:

      položaj: relativno;

      položaj: relativno;

      U ovom slučaju, #container i #div će zauzeti poziciju koju programer treba u nadređenom elementu. Glavni? postavite #div i #container u jedan roditeljski element koji će odgovarati njihovim veličinama.

      Flexbox - kako će ova značajka pomoći zamijeniti CSS Float?

      Flexbox je trenutno najnapredniji način izrade web stranica, stoga ovu značajku ne podržavaju starije verzije preglednika. Ovu činjenicu ne treba zanemariti jer korisnici sa zastarjelim verzijama preglednika neće moći vidjeti ispravnu verziju stranice.

      Flexbox nije vlasništvo, već zaseban modul. Stoga flexbox podržava niz svojstava koja rade samo s njim. Osim toga, funkcija prikaza, koja ima tri parametra inline, block i inline-block u flexboxu, ima samo jedan flex-flow.

      Kako radi Flexbox?

      Ova tehnologija pomoći će razvojnom programeru da lako poravna elemente vodoravno i okomito. Flexbox također može promijeniti smjer i redoslijed u kojem se elementi prikazuju. Ova tehnologija ima dvije osi: glavnu os i poprečnu os, oko kojih je izgrađen cijeli Flexbox. Također uklanja učinak funkcija Float i Clear. Svoj sustav gradi u kodu, u kojem koristi svojstva koja su jedinstvena za njega, tako da, nažalost, neće biti moguće duplicirati druga svojstva, kao što su Float i Position, u elementima. I to bi bilo vrlo korisno, jer, kao što je gore spomenuto, Flexbox radi samo u novim verzijama preglednika.

      Vrijedno je zapamtiti da na kraju Position, Flexbox i Float rade istu stvar - stvaraju neobičan i originalan dizajn za vaše web mjesto. Svaka opcija o kojoj se govori u članku to čini na svoj način i stoga ima i prednosti i nedostatke. Osim toga, događa se da je negdje funkcija Float savršena (na primjer, na web mjestu s jednostavnom strukturom), ali negdje je bolje koristiti Position ili Flexbox.

      Bug s dvostrukom marginom

      Međutim, ponekad, nažalost, svaki programer ima problema koji se ne odnose na napisani kod, već na greške u određenoj vrsti preglednika. Na primjer, postoji greška u Internet Exploreru koja se zove greška s dvostrukom marginom. Množi parametar margine s dva, što dovodi do pomicanja elemenata stranice izvan granica preglednika. Da biste to izbjegli, samo odredite parametar margine kao postotak. Obično se ova pogreška pojavljuje kada se vrijednosti svojstava Margin i Float podudaraju.

      margin-left:10px;

      Ovaj kod će pomaknuti element u Internet Exploreru 20 px ulijevo. Kod možete promijeniti ovako:

      margin-lijevo:10%;

      ili tako,

      margin-desno:10px;

      Obje ove opcije riješit će problem pomaka elemenata.

      Greške u pregledniku i netočan prikaz stranice

      Vrijedno je zapamtiti da Internet Explorer nije jedini preglednik u kojem se mogu pojaviti pogreške. Starije verzije preglednika Google Chrome i Mozilla također netočno prikazuju neke elemente modernih web stranica. Za svaki od ovih bugova može se pronaći rješenje. Općenito, želio bih napomenuti da će korištenje Floata stvoriti originalan i atraktivan dizajn web stranice. Razumijevanje osnova i načela rada ovog svojstva pomoći će vam da izbjegnete pogreške i olakšati život svakom programeru.

      Opis

      Svojstvo CSS float omogućuje vam da element učinite plutajućim pomicanjem na lijevi ili desni rub nadređenog elementa, ovisno o postavljenoj vrijednosti. Ako plutajući element nema eksplicitno postavljenu širinu, sažima se po širini kako bi odgovarao sadržaju.

      Preglednik obrađuje HTML kod dokumenta krećući se odozgo prema dolje, kada obrada koda dođe do plutajućeg elementa, preglednik ga postavlja na prvo mjesto prema tijeku dokumenta, tj. ispod elementa gdje se nalazi u kodu dokumenta, zatim uklanja plutajući element iz normalnog toka i pomiče ga što je više moguće na lijevi ili desni rub nadređenog elementa:

      Budući da je plutajući element uklonjen iz tijeka dokumenta, preostali blok elementi koji se nalaze u kodu nakon njega pomiču se na svoje mjesto, kao da element nikada nije bio tamo.

      Iako je plutajući element uklonjen iz normalnog toka, to i dalje utječe na ugrađeni sadržaj. Za razliku od blok elemenata, ugrađeni sadržaj smješten u kodu nakon plutajućeg elementa uzima u obzir njegove obrube i omata se oko njega, odnosno tekst se omata oko plutajućeg bloka:

      Umjesto plutajućeg bloka s tekstualnim sadržajem, možete napraviti plutajuću sliku. U ovom slučaju, tekst će se prelamati oko slike:

      Naziv dokumenta

      Korištenjem svojstva CSS float, slika je napravljena da pluta na lijevoj strani. Tekst koji se nalazi u HTML kodu ispod slike omotat će se oko slike duž desne i donje strane.

      Pokušajte »

      Možete postaviti više od jednog plutajućeg elementa u isti red ako širina nadređenog elementa to dopušta. Ako nadređeni element nije dovoljno širok, plutajući elementi koji se ne uklapaju u liniju s drugim plutajućim elementima bit će gurnuti prema dolje.

      Plutajući elementi ne utječu na visinu roditelja, odnosno ako postoji spremnik i sadrži samo plutajuće elemente, tada će visina spremnika biti nula. Ovaj problem možete riješiti na sljedeće načine:

      1. Postavite fiksnu visinu - u slučajevima kada znate kolika bi trebala biti visina posude.
      2. Primijenite svojstvo overflow s vrijednošću auto ili hidden na spremnik, tada će plutajući elementi biti uzeti u obzir pri izračunu visine spremnika. Ova metoda se može koristiti kada se unaprijed ne zna kolika bi trebala biti visina posude.

      Svojstvo float radi samo na blok elementima, pa ako se svojstvo float primijeni na elemente nekog drugog tipa, oni se pretvaraju u blok tip.

      Napomena: Apsolutni i fiksno pozicionirani elementi zanemaruju svojstvo float. Također, svojstvo float nema utjecaja na flexboxove.