Întrebările despre principiile proprietăților CSS plutesc la stânga și plutesc drept, apar cu regularitate de invidiat. Acest lucru este în special un subiect dureros pentru protectorii de ecran și programatorii, care au colectat machete pe mese de ani de zile, iar apoi sunt făcuți să lucreze cu blocuri. În plus, acest lucru este exacerbat de problemele layout-ului browser-ului CSS, cu toate că recent acest subiect a devenit într-un fel nu atât de mult ca să deranjeze nervii specialiștilor.
În orice caz, am decis în loc de răspunsuri constante la aceleași întrebări ca proprietatea CSS plutiți la stânga și plutește drept, scrieți un mesaj și trimiteți tuturor suferinzilor.
Asigură-te că în acest post nu va fi nimic deosebit de nou. Aceste informații sunt complete în rețea. Dar de fiecare dată când arăt un exemplu pe degete sau caut un link unde să-mi trimit următorul angajat, sunt deja obosit. Prin urmare, aici va fi prezentată o scurtă colecție a celei cu care se confruntă deseori.
Blochează într-un container cu proprietăți CSS setat să plutească la stânga și să plutească drept
- Există un container cu două blocuri sau mai mult.
- Blocurile interioare au proprietatea CSS plutitoare la stânga sau la dreapta.
- Dacă dimensiunea blocurilor nu este suficientă, atunci conținutul din partea de jos începe să urce în bloc și toate layout-ul este desființat.
Ilustrațiile de mai jos prezintă câteva astfel de cazuri.
O situație cu două sau mai multe blocuri cu floating-ul proprietății CSS stânga
Cum ar trebui să fie:
Cum arată când faci un aspect greșit:
Situația în care un bloc are proprietatea CSS flotată la stânga, în timp ce cealaltă are proprietatea potrivită
Cum ar trebui să fie:
Cum arată când faci un aspect greșit:
De ce sa întâmplat această situație
Blocurile noastre cu proprietățile CSS plutesc la stânga și plutesc la dreapta sunt în interiorul containerului, pentru care este specificată o anumită indentare de dedesubt. În ciuda parametrilor aparent corect setați, indentarea de dedesubt nu este suficientă încât nu funcționează, astfel încât conținutul blocurilor inferioare, de asemenea, să intre în blocul nostru superior.
Problema este că blocurile cu proprietățile date de flotor nu influențează modificarea înălțimii containerului.
De exemplu: în primul caz avem toate blocurile din interiorul containerului plutitoare. Prin urmare, înălțimea containerului va fi zero.
În cel de-al doilea caz, avem un text în plus față de blocurile plutitoare din container. Prin urmare, înălțimea containerului va corespunde înălțimii textului care umple acest bloc. În consecință, dacă textul este mai mare decât înălțimea blocurilor plutitoare interne, nu veți observa nicio problemă. Dacă textul nu este suficient, ca în exemplul de mai sus, conținutul blocurilor inferioare va ajunge în partea de jos a containerului.
Soluția 1 adaugă un bloc gol cu proprietatea CSS clar: ambele
Înainte de a închide eticheta containerului, trebuie să plasați un bloc cu CSS clar: ambele proprietăți. Apoi containerul va fi extins la blocul de jos, deoarece această proprietate blochează efectul blocurilor cu proprietatea CSS plutiți la stânga și flotarea dreapta.
Codul paginii de probă:
De asemenea, blocul cu proprietatea clară: ambele pot fi plasate imediat după eticheta de închidere a containerului sau după ultimul bloc plutitor. Containerul în această situație de mărime nu se va schimba. În general, nu va fi necesar, ci un bloc cu proprietatea clară: ambele elimină doar conținutul blocurilor plutitoare.
Codul paginii de probă:
Exemplu de cod CSS:
Metodic - nu cea mai elegantă soluție, deși merită dreptul de a trăi, pentru că este destul de eficientă. Dezavantajul evident este faptul că trebuie să adăugăm cod suplimentar textului paginii.
Soluția 2 specifică explicit înălțimea containerului
Varianta cu sarcina de înălțime a recipientului este bună numai dacă știți exact dimensiunea așteptată a conținutului acestui container. Atunci CSS-ul nostru va arata cam asa:
În cazul în care conținutul este dinamic sau aspectul este "cauciuc" și lățimea recipientului poate varia, atunci aceasta nu va fi o soluție bună.
Soluția 3: Setați proprietatea de depășire CSS pentru container
Dacă setați valoarea proprietății containerului de suprapunere la auto sau ascuns. browserul va reconstrui containerul, astfel încât să se potrivească toate blocurile plutitoare și să nu se afișeze barele de defilare.
Dacă setați proprietatea overflow la auto, fiți pregătit pentru faptul că, în anumite situații, barele de defilare pot să apară în continuare. Prin urmare, este necesar să verificați cu atenție aspectul în diferite moduri.
Exemplu de cod CSS:
Două blocuri pe un nivel, cu proprietățile CSS specificate, plutesc la stânga și plutesc la dreapta
O situație tipică este textul care se înfășoară în jurul a două blocuri cu conținut. Blocurile sunt situate pe laturile textului.
Cum ar trebui să fie:
Cum arată când faci un aspect greșit:
Motivul pentru această situație
Cel mai probabil ai putea să uiți să aplici proprietatea floating CSS la cel de-al doilea bloc. În acest caz, elementul bloc fără a specifica proprietatea float va ocupa lățimea maximă disponibilă în interiorul containerului.
Amintiți-vă că blocul va curge numai în jurul acelor elemente care se află mai jos în pagină. Prin urmare, trebuie să aranjați blocurile în ordinea corectă.
adresare
- Verificați pentru prezența valorilor proprietăților CSS float left and float right.
- Instalați blocurile în fața conținutului care ar trebui să curgă în jurul lor.
Articole similare
Articole similare
Trimiteți-le prietenilor: