Locația elementului CSS. Elemente de poziționare

Dacă tăiați orice site web creat pe baza html, veți vedea o anumită structură stratificată. Mai mult, aspectul său va fi asemănător cu un tort stratificat. Dacă așa crezi, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:

Avantajele aspectului folosind o etichetă

Există două tipuri principale de structură a site-ului web:

Tabular;
Bloc.

Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt lungimea codului și viteza scăzută de încărcare.

Când utilizați aspectul tabelului, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce utilizați blocuri div, elementele sunt afișate imediat.

Pe lângă viteza mare de încărcare, blocarea unui site web vă permite să reduceți de mai multe ori cantitatea de cod HTML. Inclusiv prin utilizarea claselor CSS.

Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.

Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.

Ajutoare pentru poziționare

În aspectul bloc, este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni
Unde:

stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
nici unul – împachetarea nu este permisă;
inherit – moștenește valoarea elementului părinte.

Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:

#stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta

Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:

Dar nici aceasta nu este cea mai bună opțiune. Când fereastra este redusă în dimensiune, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul.

Straturi de centrare

În exemplul următor, vom folosi un strat container în care vom plasa elementele rămase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginile de la marginea superioară și automat pe părțile laterale (marja: 0 auto):

#container ( lățime: 600px; margine: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; flotant: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; flotant : stânga; fundal: rgb(0,255,153); #center (lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); )

Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați puțin codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:

După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:

În exemplul următor, am folosit o serie de proprietăți CSS noi pentru a centra straturile în interiorul unui container:

#container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )

O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div într-un div:

display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
margin-left – setează marginea din stânga.

Cum se face o legătură dintr-un strat

Oricât de ciudat ar suna, acest lucru este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Să ne uităm la un exemplu practic de implementare a unui strat de legătură:

#layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ; ) Link către site-ul nostru

În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%.

Ascunderea și afișarea elementelor de bloc

Elementele bloc oferă mai multe oportunități de extindere a funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.

Acest lucru este valabil mai ales pentru pagina principală, costul publicității pe care este cel mai mare. Prin urmare, se pune problema unde să „împingă” un alt banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!

O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:

#layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Acesta este butonul magic. Făcând clic pe el, va ascunde sau afișa blocul de ascundere.

În acest exemplu, locația blocurilor div nu se schimbă în niciun fel. Aceasta folosește o funcție JavaScript simplă care modifică valoarea proprietății de afișare css după ce se face clic pe un buton (eveniment onclick).

După cum puteți vedea, această proprietate poate lua multe valori. Prin urmare, este foarte util și poate fi folosit pentru poziționarea elementelor. Într-unul dintre exemplele anterioare, am folosit una dintre valorile sale (inline-block) pentru a centra un div într-un div.

Am folosit două valori pentru proprietatea de afișare pentru a ascunde și a afișa stratul.

Acestea funcționează cu toate elementele poziționate, cu excepția celor statice.

Exemplu de pozitionare.

Elementele se pot suprapune între ele!

Afișarea unui element deasupra restului!

Proprietatea poziției are 4 valori: statică, fixă, relativă și absolută. Fiecare dintre aceste semnificații va fi demonstrat mai jos cu un exemplu de utilizare.

Înainte de a privi în detaliu toate tipurile de poziționare a elementelor pe o pagină, va trebui să luăm în considerare ce este fluxul de documente.

Fluxul documentelor

În mod implicit, elementele de pe o pagină web sunt afișate în ordinea în care apar în documentul HTML, adică elementele bloc ocupă toată lățimea disponibilă și sunt stivuite vertical unul sub celălalt. Elementele inline sunt aliniate orizontal până când toată lățimea disponibilă este ocupată, după ce întreaga lățime este ocupată, se face o întrerupere de linie și totul începe din nou. Acest aranjament de elemente se numește flux normal (numit și flux de documente sau flux general).

Puteți utiliza proprietatea float sau position pentru a elimina un element din fluxul normal. Dacă un element „cade” din fluxul normal, atunci elementele care se află în codul de sub acel element vor fi mutate în locul său pe pagina web.

Poziționare statică

Static este poziționarea implicită pentru toate elementele dintr-o pagină web. Dacă nu aplicați proprietatea poziției unui element, acesta va fi static și va apărea pe pagina web în funcție de fluxul general de elemente.

Când se aplică proprietățile CSS sus , stânga , dreapta sau jos unui element poziționat static, acestea vor fi ignorate.

Dacă este necesar, puteți seta poziționarea statică în foaia de stil folosind valoarea statică:

Titlul documentului p (poziție: static; )

Primul paragraf.

Al doilea paragraf.

Încercați »

Elementele cu poziționare fixă sunt situate pe pagina relativă la fereastra browserului. Astfel de elemente sunt eliminate din fluxul general, elementele care urmează elementul fix în flux îl vor ignora, mișcându-și și luându-și locul pe pagina web.

Merită să acordați atenție faptului că elementele cu poziționare fixă se pot suprapune cu alte elemente, ascunzându-le complet sau parțial. Când parcurgeți paginile lungi, acestea creează efectul ca obiectele nemișcate rămânând în același loc:

Titlul documentului img (poziție: fix; sus: 5%; stânga: 40%) Text Text Text Text Text Text Text Text Text Text Text Text Text Încercați »

Poziționare relativă

Elementele cu poziționare relativă, ca și elementele statice, rămân în fluxul general. Când aplicați proprietățile de sus , stânga , dreapta sau de jos elementelor poziționate relativ, acestea se vor muta în raport cu locația lor, lăsând spațiu gol acolo unde elementul a fost localizat inițial.

Astfel de elemente nu afectează poziția elementelor care le înconjoară, elementele rămase rămân pe loc și pot fi suprapuse de un element relativ poziționat:

Titlul documentului h2 (poziție: relativă; sus: 30px; ) Antet de primul nivel.

Titlu relativ pozitionat.

Titlu de nivel al treilea.

Încercați »

Notă: Elementele cu poziționare relativă (relativă) sunt de obicei folosite ca părinte pentru elementele cu poziționare absolută (absolută).

Poziționare absolută

Elementele poziționate absolut sunt îndepărtate complet din fluxul general, elementele rămase vor ocupa spațiul liber, ignorând complet elementele poziționate absolut. Apoi, puteți poziționa elementul oriunde doriți pe pagina web folosind proprietățile de sus , stânga , dreapta sau de jos.
Toate elementele poziționate absolut sunt poziționate relativ la fereastra browserului sau relativ la cel mai apropiat strămoș poziționat (dacă există unul) care are o proprietate de poziție absolută , fixă sau relativă .

Al doilea paragraf.

Imagine titlu document (poziție: absolut; dreapta: 0px; sus: 0px; )

Când elementele sunt în afara fluxului general al paginii, ele se pot suprapune. În mod obișnuit, ordinea elementelor corespunde ordinii lor în codul HTML al paginii, totuși, este posibil să se controleze ordinea de suprapunere folosind proprietatea CSS z-index , cu cât valoarea acesteia este mai mare, cu atât elementul va fi mai mare.

Titlul documentului div (poziția: absolut; lățime: 100px; înălțime: 100px; ) .div1 (culoarea fundalului: #66FFFF; stânga: 70px; sus: 0px; z-index: 1; ) .div2 (culoarea fundalului: # FFFF66; stânga: z-index: .div3 (culoare de fundal: #66FF66; stânga: z-index: 2; )

indicele z: 0;

indicele z: 2;

După cum probabil știți deja, puteți configura un site web folosind tabele, caz în care pagina este împărțită în celule. De asemenea, puteți utiliza blocuri în aceste scopuri atunci când o pagină de site web constă din elemente individuale.

Probabil că nu mă voi înșela dacă spun că o problemă serioasă pentru mulți webmasteri începători este sarcina de a plasa blocuri într-un anumit loc pe o pagină web.

Una dintre principalele dificultăți atunci când dispuneți folosind blocuri este poziționarea (alinierea) acestor blocuri.

Un pic despre straturi

Cred că mulți dintre voi ați auzit despre un strat. Și, de regulă, un strat este înțeles ca un bloc specificat de etichetă. De fapt, totul este puțin diferit.

Nu există straturi în HTML. Este doar o metaforă. Când vine vorba de straturi, ele înseamnă un anumit container (element) html care poate fi plasat într-un anumit loc pe o pagină web.

) și alte elemente.

Și acum cam ah.

Semnificația utilizării unui bloc specificat de o etichetă se reduce la mărire. La urma urmei, puteți plasa și alte elemente în interiorul acestuia (paragrafe, imagini etc.). Acest lucru creează un bloc mare cu conținut variat, care este mult mai ușor de poziționat pe o pagină web decât fiecare element separat.

Poziţionarea elementelor.
Există patru tipuri principale de poziționare:
1. Static
2. Absolut

Folosit ca locație implicită. În acest caz, browserul vizualizează codul HTML, îl împarte în elemente și compune o pagină din acestea. Rezultatul este o succesiune de un număr de elemente. Sunt afișate în ordinea în care sunt indicate în codul html.

Aplicarea parametrilor stânga, sus, dreapta și jos nu produce niciun rezultat.

Poziționarea statică trebuie avută în vedere atunci când se utilizează poziționarea relativă.

Folosind poziționarea absolută, sunt specificate coordonatele colțului din stânga sus al blocului. În acest caz, coordonatele sunt numărate relativ la locația elementului părinte. Dacă elementul părinte este o fereastră de browser, atunci blocul este aliniat în raport cu acesta. Dacă există un alt element în care se află blocul, atunci alinierea are loc în raport cu acest element.

Deja din nume devine clar că în acest caz elementul este fix. Se află într-un anumit loc de pe pagina web și nu se mișcă nicăieri. Această aliniere este adesea folosită pentru ferestre pop-up, unde sunt centrate și nu se mișcă în timp ce derulați pagina.

Acest tip de poziționare poate fi dificil. Numele său nu este pe deplin potrivit. Mulți oameni confundă poziționarea relativă și absolută a elementelor. Poate părea că alinierea este relativă la elementul părinte. Și în cazul poziționării absolute - în raport cu fereastra browserului. Dar asta nu este adevărat.

Este necesar să înțelegem că locația elementului în acest caz are loc relativ la locul său într-o poziție statică. Acesta este ceea ce s-a menționat mai sus.

Mai simplu spus, îi spui browserului să mute un element atât de mulți pixeli față de locul în care se află în mod implicit.

Mai este un punct dificil. Ce se întâmplă dacă elementul părinte are o poziție relativă, dar elementul imbricat are o poziție absolută? În acest caz, coordonatele elementului copil vor fi numărate relativ la elementul părinte, ținând cont de decalajul acestuia, dacă este cazul.

Deci, există o proprietate de poziție. Această proprietate poate lua 4 valori Static, Absolut, Fix și Relativ. Valoarea implicită este Statică.

Când specificați coordonatele pentru un element, trebuie să spuneți și browserului cum ar trebui să calculeze acele coordonate. Trebuie să-i dăm un punct de plecare.

Nu uitați că dacă proprietatea poziției este absentă, coordonatele nu vor fi luate în considerare, blocul va rămâne în același loc, în poziția sa statică.

În aceste scopuri, sunt utilizate patru tipuri de proprietăți:

1. Sus
2.Stânga
3.Corect
4. De jos

Top - o valoare pozitivă (de exemplu, 20px) mută blocul cu 20 pixeli în jos. O valoare negativă (-20px) mută elementul cu 20 de pixeli în sus. Toate acestea se întâmplă relativ la colțul din stânga sus.

Stânga - deplasați la stânga sau la dreapta, în funcție de semn. Relativ la colțul din stânga sus.

Dreapta - deplasați la dreapta și la stânga, în funcție de semn. Relativ la colțul din dreapta sus.

De jos - comutați în sus sau în jos, în funcție de semn. Apare relativ la colțul din stânga jos.

Iată codul HTML:

Și acesta este CSS-ul:

#1 {
poziție:relativă;
sus:100px;
stânga: 100px;
lățime: 500px;
înălțime: 500px;
culoare de fundal:#CCCCCC;
}

#11 {
culoare de fundal:#003399;
poziție: absolut;
jos: -30px;
dreapta: -50px;
lățime: 100px;
înălțime: 100px;
}

#2 {
culoare de fundal:#990066;
lățime: 200px;
înălțime: 300px
}

Practica.

În timp ce scriam, mi-am dat seama.

Imaginați-vă că un dezvoltator web nu trebuie să se gândească deloc la cum va arăta vizual pagina finală. Pur și simplu scrie codul, elementele în sine se aliniază pe pagină, de sus în jos (bloc) și de la stânga la dreapta (inline). Cu cât codul este scris mai sus în document, cu atât va apărea mai sus pe pagină.

În general, vom vedea comportamentul natural al elementelor și ordinea în care sunt afișate pe pagină - fluxul documentului. Dar nu suntem deloc multumiti de aceasta comanda vrem sa plasam sigla in coltul din stanga sus, iar butonul putin in dreapta. Avem nevoie de control complet asupra tuturor elementelor, noi decidem unde și ce va fi amplasat. Și pentru aceasta aveți nevoie de un instrument (proprietate) care schimbă comportamentul normal al elementelor din flux. Ce fel de proprietate este aceasta?

În stilurile CSS aceasta se numește poziționare, care poate fi statică, relativă sau absolută.

Cu poziționarea relativă, blocul se mișcă în raport cu poziția inițială. Cu toate acestea, după ce a scris blocului:

Poziția: relativă;

nu se va întâmpla nimic, va rămâne pe loc. Și blocul este mutat de un sistem de coordonate (sus, jos, stânga, dreapta), cu valori atât pozitive, cât și negative.

În interiorul blocului galben cu blocul de clasă-galben este un bloc roșu cu blocul de clasă-relativ . Într-un flux normal, blocul roșu se suprapune pe cel galben, deoarece este scris ultimul în cod.

pozitia de pornire
poziție relativă

Trebuie să mutăm blocul roșu în jos cu 10 pixeli. Acest lucru se poate face doar prin schimbarea forțată a poziției blocului roșu. Așa scriem top: 10px , dar trebuie să indicăm de unde trebuie numărați acești 10 pixeli?

Scriind poziție: relativă , clarificăm că numărăm relativ la poziția sa actuală.

Bloc-galben (
culoare de fundal: #ffe70f;
}

relativ la bloc (
poziție: relativă;
sus: 10px;
culoare de fundal: #ed5b77;
}

În imagine vedem cum blocul roșu s-a deplasat în jos, cu 10 pixeli în jos față de poziția inițială.

Dacă eliminați poziția: relativă din cod, blocul va rămâne pe loc. Și dacă în loc de relativ scriem absolut , atunci în mod implicit acești 10 pixeli vor fi numărați de la marginea ferestrei browserului și, ca urmare, blocul nostru, dimpotrivă, se va ridica, ajungând la marginea de jos a browserului. Și asta nu făcea parte din planurile noastre.

În imagine, blocul este poziționat absolut, acesta este momentul în care sistemul de coordonate este numărat de la marginea browserului Prin înlocuirea unui singur cuvânt, am schimbat poziția blocului.

Poziție: absolută;

Există o particularitate. Poziționarea absolută afectează și elementele inline. Dacă setați poziție: absolută pentru un element inline, acesta se va comporta ca un element bloc. Acesta este un analog al proprietății - afișare: bloc.

Asta nu este tot, elementul „absolut” situat în interiorul părintelui „relativ” își schimbă punctul de referință de coordonate și începe să fie poziționat departe de părinte.

poziție: relativă

poziție: absolută;

Un bloc cu clasa block-absolute se află în interiorul blocului părinte-yellow .

Bloc-galben (
poziție: relativă;
umplutură: 10px;
culoare de fundal: #ffe70f;
}

Deoarece blocul galben are o poziționare relativă, blocul roșu cu poziționare absolută este deplasat față de cel roșu cu pixelii dați.

Bloc absolut (
poziție: absolută;
jos: 10px;
stânga: 10px;
culoare de fundal: #ed5b77;
}

La derularea paginii, un bloc cu poziție: fix va rămâne pe loc, de obicei această metodă este folosită pentru a fixa bara de navigare.

Rezolvă ordinea suprapunerii blocurilor „absolute”. Vrem ca blocul roșu să fie deasupra blocului galben, apoi specificăm z-index: 2 pentru roșu și z-index: 1 pentru galben.

Roşu
Galben

Bloc-rosu (
poziție: relativă;
indicele z: 2;
culoare de fundal: #ffe70f;
}

Bloc-galben (
poziție: absolută;
sus: 20px;
indicele z: 1;
culoare de fundal: #ed5b77;
}

Două instrumente principale sunt adesea folosite pentru aspectul paginii - poziționareŞi libera circulatie (plutitoare). Poziționarea CSS vă permite să specificați unde apare caseta unui element, iar flotarea liberă mută elementele la marginea stângă sau dreaptă a casetei containerului, permițând restului conținutului să „curgă” în jurul acestuia.

Proprietatea de poziție vă permite să specificați cu precizie noua locație a blocului în raport cu locul în care s-ar afla în fluxul normal al documentului. În mod implicit, toate elementele sunt aranjate secvenţial unul după altul în ordinea în care sunt definite în structura documentului HTML. Proprietatea nu este moștenită.

Sens:
static	Valoarea implicită înseamnă nicio poziționare. Elementele sunt afișate secvenţial unul după altul, în ordinea în care sunt definite în documentul HTML. Folosit pentru a șterge orice altă valoare de poziționare.
relativ	Un element poziționat relativ este mutat din poziția sa normală în direcții diferite față de limitele containerului său părinte, dar spațiul pe care l-a ocupat nu dispare. Cu toate acestea, un astfel de element se poate suprapune cu alt conținut de pe pagină. Dacă pentru un element relativ poziționat setați proprietățile sus și jos sau stânga și dreapta în același timp, atunci în primul caz va funcționa numai sus, în al doilea - stânga. Poziționarea relativă vă permite să setați un index z pentru un element, precum și să poziționați absolut elementele copil într-un bloc.
absolut	Un element poziționat absolut este eliminat complet din fluxul de documente și poziționat în raport cu limitele blocului său container (alt element sau fereastră de browser). Blocul container pentru un element poziționat absolut este cel mai apropiat element strămoș a cărui valoare a proprietății de poziție nu este statică. Locația marginilor elementului este determinată folosind proprietățile offset. Spațiul pe care l-a ocupat un astfel de element se prăbușește ca și cum elementul nu ar exista pe pagină. Un element poziționat absolut se poate suprapune sau poate fi suprapus de alte elemente (datorită proprietății z-index). Orice element poziționat absolut generează un bloc, adică preia afișarea valorii: bloc; .
fix	Fixează un element într-o locație specificată pe pagină. Blocul container al unui element fix este fereastra de vizualizare, adică elementul este întotdeauna fix în raport cu fereastra browserului și nu își schimbă poziția în timpul derulării paginii. Elementul în sine este complet eliminat din fluxul de document principal și creat într-un flux de document nou.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Proprietățile descriu decalajul față de cea mai apropiată parte a blocului container. Setați pentru elementele pentru care valoarea proprietății de poziție nu este statică. Ele pot lua atât valori pozitive, cât și negative. Nu moștenit.

Pentru proprietatea de sus, valorile pozitive mută marginea superioară a elementului poziționat dedesubt, iar valorile negative mută marginea superioară a blocului său container. Pentru proprietatea din stânga, valorile pozitive mută marginea elementului poziționat la dreapta, iar valorile negative mută marginea elementului poziționat la stânga. Adică, valorile pozitive mută elementul în interiorul blocului container, iar valorile negative îl mută în afara acestuia.

Pentru blocul container al unui element poziționat absolut, proprietatea poziție: relativă este setată fără decalaje. Aceasta permite poziționarea elementelor într-un element container.

.wrap ( umplutură: 10px; înălțime: 150px; poziție: relativ; fundal: #e7e6d4; text-align: dreapta; chenar: 3px întreruptă #645a4e; ) .alb (poziția: absolut; lățime: 200px; sus: 10px; stânga : 10px; fundal: #ffffff: 312a22;
Orez. 2. Poziţionare relativă absolută

1. Dacă lățimea sau înălțimea unui element poziționat absolut este setată la auto , atunci valoarea acestuia va fi determinată de lățimea sau înălțimea conținutului elementului. Dacă lățimea sau înălțimea este declarată în mod explicit, atunci aceasta este valoarea care va fi atribuită.
2. Dacă în interiorul unui bloc cu poziție: absolut există elemente pentru care este setat float, atunci înălțimea acestui element va fi egală cu înălțimea celui mai înalt dintre aceste elemente.
3. Pentru un element cu poziție: absolută sau poziție: fixă, nu puteți seta simultan proprietatea float, dar pentru un element cu poziție: relativ puteți.
4. Dacă strămoșul elementului poziționat este un element bloc, atunci containerul bloc este format din zona de conținut delimitată de chenar. Dacă strămoșul este un element inline, blocul container este format de limita exterioară a conținutului său. Dacă nu există un strămoș, blocul container este elementul corpului.

În ordinea normală, elementele bloc sunt redate pornind de la marginea de sus a ferestrei browserului și lucrând spre marginea de jos. Proprietatea float vă permite să mutați orice element, aliniindu-l la marginea stângă sau dreaptă a paginii web sau elementul container care îl conține. În acest caz, alte elemente de bloc îl vor ignora, iar elementele inline se vor deplasa la dreapta sau la stânga, eliberând spațiu pentru el și curgând în jurul lui.

Un bloc plutitor preia dimensiunile conținutului său, ținând cont de umplutură și chenare. Marginile de sus și de jos ale elementelor plutitoare nu se prăbușesc. Proprietatea float se aplică atât elementelor bloc, cât și elementelor inline.

Marginea exterioară stângă sau dreaptă a unui element deplasat, spre deosebire de elementele poziționate, nu poate fi situată la stânga (sau la dreapta) a muchiei interioare a blocului său container, de exemplu. depășește limitele sale. Mai mult, dacă este specificată umplutura internă pentru blocul container, atunci blocul plutitor va fi distanțat de marginea blocului container la distanța specificată.

Proprietatea modifică automat valoarea calculată (afișată de browser) a proprietății de afișare pentru a afișa: bloc pentru următoarele valori: inline , inline-block , table-row , table-row-group , table-coloana , table-coloana-grup , tabel-celulă . Valoarea tabelului inline se modifică în tabel .

Proprietatea nu are efect asupra elementelor cu display: flex și display: inline-flex .

Când utilizați proprietatea float pe elementele bloc, asigurați-vă că specificați o lățime. Acest lucru va crea spațiu pentru alt conținut în browser. Dar dacă lățimea combinată a tuturor coloanelor este mai mare decât spațiul disponibil, atunci ultimul element va coborî.

În același timp, marginile verticale ale elementelor plutitoare nu se prăbușesc cu marginile elementelor învecinate, spre deosebire de elementele bloc obișnuite.

Proprietatea clear determină modul în care va fi poziționat elementul care urmează elementul plutitor. Proprietatea anulează float pe una sau ambele părți ale elementului care este stabilit de proprietatea float. Pentru a preveni afișarea fundalului sau a marginilor sub elementele plutitoare, utilizați regula (depășire: ascuns;).

Să presupunem că aveți un container bloc pentru care lățimea și înălțimea nu sunt specificate. În interiorul acestuia este plasat un bloc plutitor cu dimensiuni specificate.

.container ( umplutură: 20px; fundal: #e7e6d4; chenar: 3px punctat #645a4e; ) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; umplutură: 0 20px; fundal: #ffffff ; bordura: 3px #666666; Orez. 4. „Efectul de colaps” al blocului container

Soluţie:
Creăm clasa .clearfix și, în combinație cu pseudo-clasa :after, o aplicăm blocului container.

.container ( umplutură: 20px; fundal: #e7e6d4; chenar: 3px punctat #645a4e; ) .floatbox (float: stânga; lățime: 300px; înălțime: 150px; margine-dreapta: 20px; umplutură: 0 20px; fundal: #ffffff ; chenar: 3px punctat #666666 .clearfix:după (conținut: ""; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns; )

A doua opțiune pentru ștergerea fluxului:

Clearfix:după (conținut: „”; afișare: tabel; șterge: ambele; )
Orez. 5. Aplicarea metodei de „curățare” unui bloc container care conține un element plutitor

Există un alt truc pentru a curăța fluxul pentru un element care conține elemente plutitoare, cum ar fi o listă orizontală cu marcatori:

Ul ( margine: 0; stil listă: niciunul; umplutură: 20px; fundal: #e7e6d4; overflow: automat; ) li ( float: stânga; lățime: calc(100% / 3 - 20px); înălțime: 50px; margin- dreapta: 20px; fundal: #ffffff: 3px punctat #666666 ) li:last-child (marja-dreapta: 0;) Fig. 6. Curățarea fluxului de listă orizontal