CSS Float: descriere, proprietăți

Float - una dintre funcțiile de bază ale limbii CSS (Sheets of Style Cascading

De asemenea, dezvoltatorii pot utiliza mai multe opțiuni convenabile de formatare, cum ar fi flexbox sau poziție pentru a schimba elementul de spațiu pe site, dar primele lucruri mai întâi. În primul rând, trebuie să înțelegeți avantajele și dezavantajele proprietății Float.

CSS Float - de ce este nevoie?

Floatul este o proprietate pentru poziționarea elementelor. În fiecare zi se vede pe paginile ziarelor și revistelor, uitandu-se la poze și text, care se înfășoară foarte atent în jurul lor. În lumea codurilor HTML și CSS atunci când utilizați funcția Float ar trebui să se întâmple același lucru. Dar merită să ne amintim că editarea imaginilor nu este întotdeauna scopul principal al acestei funcții. Acesta poate fi folosit pentru a crea un aspect popular al elementelor site-ului în două, trei, patru coloane. De fapt, proprietatea Float CSS este aplicată la aproape orice element html. Cunoscând elementele de bază ale editării layoutului elementelor care utilizează funcția Float și apoi proprietatea, crearea unui site web nu va fi dificilă.

Programele speciale pentru designerii de layout pot uneori să ignore imaginile, dar să le depășească. Lucruri similare se întâmplă în designul web, doar cu părerea că textul, în loc de zalazit pe imagine, este afișat (în cazul în care proprietatea Float este aplicat incorect) lângă el sau sub el, dar nu întotdeauna unde dezvoltatorul are nevoie de el.

Descrierea proprietății CSS Float

De fapt, capacitatea de a utiliza proprietatea Float este un as foarte bun în manșon pentru orice designer web. Dar, din nefericire, lipsa de înțelegere a modului în care funcționează această funcție poate duce la confruntări cu elemente de sit și alte frustrări de acest fel. Anterior, situații similare au avut loc și din cauza unor bug-uri în browsere. Acum se va dezvălui secretul folosirii corecte a proprietății Float, fără a mai apărea probleme cu acest lucru.

Proprietatea Float are patru semnificații:

• Float: moșteniți;
• Float: drept;
• Float: stânga;
• Float: nici unul;

Pentru cei care cunosc engleza, valorile parametrilor proprietății Float trebuie să fie clare. Dar pentru cei care nu știu, există o mică explicație. parametru : stânga; mișcă corpul elementului în cel mai din stânga colț al elementului părinte. Același lucru se întâmplă (numai în cealaltă direcție) cu parametrul bcgjkmpjdfybb : drept;. valoare : moștenirea- ordonează elementul să preia aceleași setări ca și părintele. Astfel de elemente sunt, de asemenea, numite copii, deoarece sunt localizați direct în interiorul părintelui în codul html. O proprietate : nici unul; Permite elementului să nu spargă fluxul normal al documentului, este setat implicit pentru toate părțile din cod.

Cum funcționează Float?

Proprietatea Float CSS funcționează destul de simplu. Tot ceea ce a fost descris mai sus se poate face fără prea multe dificultăți. Atunci totul va fi la fel de simplu. Dar, înainte de a continua să studieze proprietățile lui Float, merită o mică înțelegere a teoriei. Fiecare element al unui site este un bloc. Este ușor să vedeți acest lucru deschizând consola în Google Chrome apăsând pe Ctrl + Shift + J. Textul, titlul, fotografia, link-urile și toate celelalte părți ale site-ului vor fi afișate în blocuri de dimensiuni diferite. Inițial, toate aceste blocuri merg unul după altul. După cum puteți vedea în exemplul de mai jos, liniile de cod merg unul după altul, astfel încât acestea vor fi afișate strict unul după altul.

Aceasta se numește flux normal. Cu acest flux, toate blocurile se află una peste alta (fără a traversa corpul elementelor). Inițial, tot conținutul paginii web este localizat în acest fel. Cu toate acestea, atunci când se utilizează, de exemplu, proprietățile CSS float element de limbaj Stânga părăsește poziția naturală pe pagină și se deplasează spre stânga. Acest comportament duce în mod inevitabil la o coliziune cu acele elemente care au rămas în fluxul normal.

Cu alte cuvinte, elementele în loc să fie poziționate vertical sunt acum una lângă cealaltă. Dacă elementul părinte are suficient spațiu pentru a plasa doi copii în sine, atunci nu se produce o coliziune și, dacă nu, atunci impunerea unui obiect pe altul este inevitabilă. Acest lucru este extrem de important să vă amintiți pentru înțelegerea muncii proprietății Float CSS.

Funcție clară pentru rezolvarea problemelor

Funcția Float are un prieten inima - clar. Împreună, nu vărsați apă. Ambele funcții se completează reciproc și îl fac pe dezvoltator fericit. Așa cum am menționat mai sus, elementele învecinate ieșesc din fluxul lor normal și încep să "plutească", ca și elementul la care a fost aplicată proprietatea Float (de exemplu, CSS Float Top). Ca urmare, în loc de un element plutitor, două sunt obținute și nu deloc în locul în care intenționează să fie localizate de dezvoltator. Din acest moment, exact toate problemele încep.

Funcția Clear are cinci valori:

• : stânga;
• : drept;
• : ambele;
• : moștenire;
• nici unul;

Prin analogie, puteți înțelege când este mai bine să aplicați funcția Clear. Dacă avem o linie scrisă în cod Float: drept; (Se înțelege codul CSS), atunci funcția ar trebui să fie Clar: dreapta-. Același lucru se mișcă și proprietăți Float: stânga; o va completa Clear: stânga;. Când scrieți codul Clear: ambele- se dovedește că elementul la care se aplică această funcție va fi sub elementele la care se aplică funcția Float. Moștenirea ia setările de la elementul părinte și nici una nu modifică structura site-ului. Dacă înțelegeți modul în care funcționează funcția Float și Clear, puteți scrie un lucru unic și neobișnuit HTML și CSS Float-code, care vor face site-ul dvs. unic.

Folosind Float pentru a crea coloane

Float caracteristică deosebit de utilă atunci când creați coloane de pe site-ul (sau locația conținutului CSS float în centrul paginii web). Acesta este codul cel mai practic și convenabil, deci luați în considerare mai multe opțiuni pentru crearea unui șablon personalizat pentru un site format din două coloane. De exemplu, luați un site standard cu conținut din stânga, bara de navigare (bara de navigare) din dreapta, titlu și subsol. Codul va fi:

Acum trebuie să înțelegem ce este scris aici. Elementul parental care conține partea principală a codului html se numește container. Acesta vă permite să nu dați elemente la care se aplică funcția Float, să vă plimbați în direcții diferite. Dacă nu, atunci aceste elemente ar înota până la marginile browserului.

Apoi, în cod du-te #content și #navigation. La aceste elemente, se aplică funcția Float. #content este trimis în stânga și #navigation merge spre dreapta. Acest lucru este necesar pentru a crea un site cu două coloane. Trebuie să specificați lățimea astfel încât obiectele să nu se suprapună. Lățimea poate fi specificată în procente. Deci, chiar mai convenabil decât în ​​pixeli. De exemplu, 45% pentru #content și 45% pentru #navigație și pentru a da restul de 10% la proprietatea marjei.

Proprietatea Clear, aflată în #footer, nu permite ca subsolul să urmeze #navigation și #content, dar îl lasă în același loc în care era. Ce se poate întâmpla? dacă nu specificați o proprietate Clear? În acest cod, #footer va merge pur și simplu și va apărea sub #navigation. Acest lucru se va întâmpla din cauza faptului că #navigation are suficient spațiu pentru a plasa încă un element. În acest exemplu ilustrativ, puteți vedea clar modul în care proprietățile Clear și Float se completează reciproc.

Problemele cu care vă puteți confrunta atunci când scrieți codul

Exemplele de mai sus sunt destul de simple. Dar pot avea și probleme. În general, de fapt, pot apărea multe probleme neașteptate cu funcția Float. Oricât de ciudat ar putea fi, problemele de obicei nu apar cu CSS, ci cu cod html. Locul unde este localizat elementul cu funcția Float în codul html afectează în mod direct activitatea acestuia din urmă. Pentru a evita diferite tipuri de dificultăți, este mai bine să urmați o regulă simplă - să plasați mai întâi elementele cu funcția Float în cod. Aproape întotdeauna funcționează și minimizează comportamentul lor neașteptat.

Coliziunea elementelor

O coliziune are loc atunci când un element părinte care conține mai mulți copii nu se poate încadra în toate și se suprapune unul pe celălalt. Se întâmplă chiar ca elementele să nu fie afișate, dar să dispară de pe site. Acesta nu este un bug de browser, ci comportamentul așteptat și adecvat al elementelor cu funcția Float.

Datorită faptului că aceste elemente sunt inițial în cursul normal, iar apoi este rupt browser-ul de proprietate Float le poate îndepărta de pe site. Cu toate acestea, nu disperați, deoarece soluția este simplă și clară - utilizați proprietatea Cear. Este posibil ca Clear să fie cea mai eficientă metodă din toate căile din această problemă.

Dar problema de coliziune a elementelor unei pagini web poate fi rezolvată într-un alt mod. Există cel puțin două alte modalități:

• utilizarea poziției funcției;
• aplicarea Flexbox.

Funcția de poziție este uneori o bună alternativă la CSS Float. În centrul paginii web, în ​​cazul aplicării Poziției, este bine să aranjați imaginile. Dacă aplicați corect valorile: absolute și: relative, atunci elementele vor cădea în loc și nu se vor suprapune.

Parsarea funcțiilor Position și Float

Merită să înțelegem în detaliu modul în care codul HTML și înlocuiți CSS Float cu Poziție. De fapt, este foarte simplu. Să presupunem că există un element #container și #div.

#container {

lățime: 40%;

float: stânga;

margine: 10 pixeli;

}

#div {

lățime: 40%;

float: dreapta;

margine: 10 pixeli;

}

#footer {

clar: ambele;

}

În acest exemplu, folosirea funcției Float (CSS Div) în al doilea container va ajuta la crearea unui site standard de două coloane. Nu uitați niciodată funcția Clear. Fără ea, puteți suprapune elemente numai unul peste celălalt.

Deci, cum pot schimba codul CSS și Float pentru a folosi Postion? Este foarte simplu:

#container {

lățime: 40%;

poziție: relativă;

margine: 10 pixeli;

}

#div {

lățime: 40%;

poziție: relativă;

margine: 10 pixeli;

}

În acest caz, #container și #div vor lua poziția dorită de dezvoltator în elementul părinte. Principalul lucru? puneți #div și #container într-un element parental, care se va potrivi cu dimensiunile acestora.

Flexbox - cum ajuta această funcție să înlocuiască CSS Float?

Flexbox este cel mai avansat mod de a crea site-uri în acest moment, deci această caracteristică nu este acceptată de versiuni vechi ale browserelor. Acest fapt nu ar trebui să fie redus, deoarece utilizatorii cu versiuni învechite de browsere nu vor putea vedea versiunea corectă a site-ului.

Flexbox nu este o proprietate, ci un modul separat. Prin urmare, flexbox acceptă un număr de proprietăți care funcționează numai cu acesta. În plus, funcția de afișare, care are trei parametri inline, bloc și bloc în linie în flexbox, are doar un flex-flow.

Cum funcționează Flexbox?

Această tehnologie va ajuta dezvoltatorul să alinieze ușor elementele orizontal și vertical. De asemenea, Flexbox poate schimba direcția și ordinea elementelor. Această tehnologie are două axe: axa principală și axa transversală, în jurul căruia este construit întregul Flexbox. De asemenea, elimină acțiunea funcțiilor Float și Clear. El construiește sistemul său în cod, care foloseste un unic pentru proprietatea sa, așa că, din păcate, să nu fie în măsură de a se replica în celule alte proprietăți, cum ar fi float și poziția. Și acest lucru ar fi foarte util, deoarece, așa cum am menționat mai sus, Flexbox funcționează numai în versiuni noi de browsere.

Merită să vă amintiți că, în analiza finală Poziția, Flexbox și Float fac același lucru - creați un design neobișnuit și original pentru site-ul dvs. Fiecare opțiune subliniată în articol o face în felul său și, prin urmare, are atât avantaje, cât și dezavantaje. În plus, se întâmplă că funcția float undeva perfectă (de exemplu, la site-ul cu o structură simplă), dar undeva mai bine să utilizați poziția sau flexbox.

Bug cu două margini

Cu toate acestea, uneori, din păcate, fiecare dezvoltator are probleme, care nu au legătură cu codul scris, ci cu bug-uri în anumite tipuri de browser. De exemplu, există o eroare în Internet Explorer numită Double Margin Bug. Aceasta multiplică parametrul Marja cu două, ceea ce face ca elementele site-ului să se miște din limitele browserului. Pentru a evita acest lucru, specificați parametrul marjă în procente. Acest bug apare, de obicei, atunci când valoarea proprietății Margin și Float este aceeași.

#div {

float: stânga;

margin-stânga: 10px;

}

Acest cod va muta elementul în Internet Explorer cu 20 de pixeli în stânga. Puteți modifica codul astfel:

#div {

float: stânga;

marginea-stânga: 10%;

}

sau așa,

#div {

float: stânga;

margin-dreapta: 10px;

}

Ambele opțiuni vor rezolva problema deplasării elementelor.

Browser bugs și afișarea incorectă a site-ului

Merită să ne amintim că Internet Explorer nu este singurul browser în care pot apărea bug-uri. Versiunile vechi ale Google Chrome și Mozilla afișează incorect și unele elemente ale site-urilor moderne. Pentru fiecare dintre aceste bug-uri, puteți găsi o soluție. În general, vreau să menționez că utilizarea lui Float va crea un design original și atractiv al site-ului. Înțelegerea principiilor și principiilor acestei proprietăți va evita greșelile și va ușura viața pentru orice dezvoltator.