Float and clear - proprietăți CSS pentru elementele plutitoare în aspectul bloc. Plutește în detaliu

În design web modern, proprietatea pluti folosit aproape la fiecare pas. Dar, în ciuda acestei prevalențe, nu toată lumea înțelege mecanismul de funcționare al blocurilor plutitoare, comportamentul lor și ce consecințe pot fi din utilizarea lor.

Ce este „float”?

Pluti este o proprietate de poziționare CSS. Pentru a-i înțelege esența și originea, trebuie să vă îndreptați atenția către designul de imprimare. În machetele tipărite, imaginea poate fi poziționată astfel încât textul să curgă în jurul ei. Aceasta se numește de obicei „ încadra textul".

În aspectul paginii, blocul care conține textul poate fi specificat pentru utilizare înfășurați text în jurul unei imagini sau ignora împachetarea. Ignorarea împachetare a textului va permite cuvintelor să curgă peste imagine ca și cum nu ar fi acolo. Aceasta este diferența dacă imaginea face parte din fluxul de pe pagină sau nu. În web design, totul este foarte asemănător.

În web design, un element cu o proprietate CSS aplicată acestuia pluti se va comporta ca o imagine cu text înfășurat în jurul ei într-un aspect tipărit. Elementele plutitoare rămân parte din fluxul paginii web. Acest lucru nu este deloc același cu elementele poziționate absolut, care sunt îndepărtate din flux, ca și cum în aspectul de imprimare blocul de text a fost instruit să ignore înfășurarea imaginii. Elementele poziționate absolut nu afectează plasarea altor elemente, iar alte elemente nu afectează plasarea acestora.

Stabilirea unei proprietăți pluti pentru elementele care utilizează CSS arată astfel:

#sidebar (float: dreapta;)

Există patru valori valabile pentru proprietate pluti - stânga, dreapta, nici unul, moşteni... Primii doi, stângași dreapta indicați direcțiile de locație - stânga și respectiv dreapta. Nici unul- valoarea implicită, indică faptul că elementul nu plutește și moşteni indicând elementului să moștenească valoarea proprietății pluti din elementul părinte.

Pentru ce se folosește plutitorul?

În afară de un exemplu simplu de împachetare a textului în jurul unei imagini, pluti poate fi folosit pentru a crea machete web.

Pluti, util și pentru elementele mici de layout. De exemplu, luați acest mic fragment dintr-o pagină web. Dacă stabilim proprietatea pluti pentru o imagine mică de avatar, atunci când dimensiunea imaginii se schimbă, împachetarea se va schimba în conformitate cu noile dimensiuni ale imaginii:

Același aspect poate fi implementat folosind poziționarea relativă a containerului și poziționarea absolută a avatarului și a textului din acesta. Dar într-un aspect implementat conform acestei scheme, redimensionarea imaginii nu va afecta blocul de text, deoarece elementele cu poziționare absolută nu afectează alte elemente și alte elemente nu le afectează.

Resetați înfășurarea

clar proprietate legată de proprietate pluti... Element cu proprietate setată clar nu se va deplasa în sus când curge în jurul unui element cu o proprietate setată pluti dar va pluti în jos ignorând ambalajul. Și din nou, o ilustrație care va explica totul fără alte prelungiri.

În exemplul de mai sus, bara laterală plutea în dreapta blocului de conținut principal. Subsolul s-a mutat într-un loc liber sub bara laterală, înfășurându-se în jurul blocului de conținut principal. Pentru a rezolva această problemă, trebuie să specificați o valoare pentru proprietatea clear: ambele a „footer” pentru a „șterge” ambalarea în jurul ambelor coloane.

#footer (clar: ambele;)

Proprietate clar are patru sensuri. Ambii folosit pentru a reseta wrap în ambele direcții. Stângași Dreapta sunt folosite pentru a reseta o direcție - stânga sau, respectiv, dreapta. Nici unul este implicit. Moşteni poate fi a 5-a valoare, dar surprinzător nu este acceptată Internet Explorer... Resetarea doar a fluxului din stânga sau din dreapta este destul de rară, dar are beneficii practice.

Mare colaps

Un lucru de-a face pluti surprinzător este efectul acestei proprietăți asupra elementelor părinte. Dacă elementul părinte nu conține alte elemente decât un float, atunci înălțimea lui se prăbușește literalmente. Acest lucru nu este întotdeauna vizibil, mai ales dacă părintele nu are un trecut vizibil, dar este important să țineți cont de acest lucru.

Dar alternativa la un astfel de colaps este și mai rea. Luați în considerare următorul scenariu:

Dacă caseta de sus se extinde automat pentru a găzdui elementul plutitor, atunci obținem o întrerupere a fluxului de text între paragrafe, fără posibilitatea de a-l elimina. Dacă ar fi așa, atunci dezvoltatorii s-ar plânge mult mai des de acest comportament al blocurilor plutitoare decât de colapsul acum.

Colapsul trebuie reținut întotdeauna pentru a preveni comportamentul ciudat de aspect și problemele între browsere. Putem rezolva această problemă folosind clar după elementul plutitor din container, dar înainte ca containerul să fie închis.

Tehnici de anulare a împachetarii

Dacă te afli într-o situație în care știi unde va fi următorul element, poți folosi clear: ambele și mergi la treaba ta. Acest lucru este ideal, deoarece nu necesită hack-uri sau elemente suplimentare. Dar, din păcate, de obicei nu totul merge așa cum ne dorim și, în acest caz, puteți folosi următoarele instrumente.

Metoda blocului gol.

Este literalmente un bloc gol.

... Uneori poți găsi elementul
sau orice alt element aleatoriu, dar div este cel mai comun, deoarece nu are un stil implicit în browsere, nu are nicio funcție specială și este puțin probabil să fie în stilul CSS general. Această metodă este respinsă de puriștii semantici deoarece prezența ei nu are nicio semnificație contextuală pe pagină și este acolo doar pentru apariție. Desigur, în sens strict, au dreptate, dar el își face treaba și nu face rău nimănui.

Metoda overflow.

Bazat pe specificarea unei proprietăți CSS revărsare pentru elementul părinte. Dacă această proprietate este setată la auto sau ascuns pentru elementul părinte, apoi se va extinde după elementul plutit, curățând efectiv plutitorul din jurul lui pentru elementele ulterioare. Această metodă poate fi frumoasă din punct de vedere semantic, deoarece nu necesită elemente suplimentare. Cu toate acestea, după cum puteți vedea, am adăugat un nou div pentru a utiliza această metodă, care este echivalentă cu utilizarea unui bloc nesemantic gol și este mai puțin flexibilă. De asemenea, trebuie amintit că proprietatea revărsare nu are scopul de a dezactiva împachetarea. Aveți grijă să nu ascundeți accidental conținutul sau să nu provocați bare de defilare nedorite.

Metodă ușoară de curățare.

Utilizează un pseudo-selector CSS (: după) pentru a elimina împachetarea. În loc să folosiți proprietatea revărsare pentru elementul părinte, setați o clasă suplimentară pentru acesta, de exemplu „clearfix” și utilizați următorul stil CSS:

Clearfix: după (conținut: "."; Vizibilitate: ascuns; afișare: bloc; înălțime: 0; clar: ambele;)

Utilizează o mică bucată de conținut care este ascunsă vederii, situată după elementul părinte, care îndepărtează ambalajul. Această metodă nu este completă, deoarece trebuie să fie costisitoare pentru a suporta browsere mai vechi.

Situații diferite necesită metode diferite de resetare a plutitorului. Să luăm ca exemplu o grilă cu diferite tipuri de blocuri.

Pentru o mai bună integrare vizuală a blocurilor similare, trebuie să începem o nouă linie atunci când culoarea se schimbă. Putem folosi metoda overflow sau light clear dacă fiecare grup de culori are un părinte. Sau utilizați metoda blocurilor goale între grupuri. Trei blocuri părinte care nu existau înainte sau trei blocuri goale care nu existau înainte. Depinde de tine să decizi care metodă este cea mai bună.

Probleme cu elementele plutitoare

Elementele plutitoare sunt adesea criticate pentru fragilitatea lor. O mare parte din această fragilitate provine de la IE6 și de la acesta bug-uri orientate spre plutire... Dar, pe măsură ce tot mai mulți dezvoltatori renunță la suportul pentru IE6, nu trebuie să vă gândiți la asta, dar pentru cei preocupați de compatibilitate, iată o listă scurtă.

Apasa in jos, este un simptom că un element din interiorul unei casete plutitoare este mai lat decât această casetă (acest lucru se întâmplă de obicei cu imagini). Majoritatea browserelor vor afișa porțiunea proeminentă a elementului plutitor, dar acest lucru nu va afecta aspectul. IE va extinde caseta plutitoare și are adesea un efect drastic asupra aspectului. Un exemplu tipic este o imagine care iese din blocul de conținut principal, împingând bara laterală în jos.

Soluție rapidă la problemă: folosi overflow: ascuns; pentru a tăia excesul.

Bug cu marjă dublă este un alt lucru de care trebuie să țineți cont atunci când lucrați cu IE6. Acest bug se exprimă prin faptul că dacă câmpul este pe aceeași parte în care este orientat pluti, terenul este dublat. De exemplu:

Vom introduce marginea din stânga 40 px., in loc de 20 px.

Soluție rapidă la problemă: setați afișarea: în linie pentru blocul flotant și nu vă faceți griji, elementul va rămâne blocat.

Jog 3px... Esența acestui bug este că textul situat lângă elementul plutitor este deplasat în mod ciudat cu trei pixeli, ca sub influența câmpului de forță situat în jurul elementului plutitor. Soluție rapidă la problemă: Setați lățimea și înălțimea textului afectat.

În IE7 apare Bug marginea inferioară când părintele plutește și părintele său plutește și el. Marja-partea de jos a copilului este ignorată de elementul strămoș. Soluție rapidă la problemă: Folosiți padding-bottom pe părinte în loc de marginea de jos a copilului.

Să vedem ce se întâmplă cu elementele când li se aplică proprietatea float:

• Elementul „plutește” și se fixează la marginea stângă (dacă float: stânga) sau dreapta (float: dreapta) a elementului părinte sau a elementului care este, de asemenea, flotat
• Dacă un element, din cauza lățimii blocului părinte, nu se poate potrivi într-un rând cu un alt element, acesta va fi deplasat în jos până când rămâne fără spațiu
• Alte elemente bloc pentru care nu este specificată nicio valoare float se comportă ca și cum elementul float nu se află pe pagină (elementul este „float”). Liniile „știu” că elementul a plutit și curg în jurul lui
• Lățimea blocului plutit este determinată de conținut.

Să ne uităm la un exemplu. Decomentați proprietatea float: lăsată în interiorul CSS. Uită-te la rezultat.

Înlocuiți float: stânga cu float: dreapta.

Proprietatea float este convenabilă pentru a oferi flux de text în jurul imaginilor. Luați în considerare un exemplu:

Adăugați un comentariu în linia fișierului CSS la proprietatea float: left. Vedeți cum se va schimba aspectul paginii. Înlocuiți float: stânga cu float: dreapta.

„Prăbușirea” elementului părinte atunci când plutesc „copii”

Lăsați elementul doi să fie plasat în interiorul elementului unu. În mod implicit, înălțimea unuia este întinsă pentru a se potrivi conținutului. De îndată ce aplicăm proprietatea float elementului doi, acesta plutește, iar elementul părinte al unuia nu va ști că doi există. Dacă doi nu are conținut, atunci înălțimea sa este zero. Acest comportament se numește „colaps”. Pentru a preveni colapsul părintelui, fie se setează proprietatea min-height - înălțimea minimă, fie se folosește o metodă: adăugați un alt bloc pentru care este setată proprietatea:

1

Acest bloc nu este vizibil pe pagină, dar este clar: ambele proprietăți elimină înfășurarea elementelor și întinde părintele la înălțimea conținutului.

Decomentați proprietatea CSS float: left. Vedeți cum se comportă elementul părinte:

Luați în considerare un exemplu folosind clar: ambele

Așa că sunteți familiarizat cu proprietățile de bază ale float. Să punem cunoștințele în practică.

A executa

Exercitiul 1. Adăugați clase la imagini. În clase, specificați proprietatea float: left. Explorați cum se va schimba rezultatul paginii.

Întrebările despre cum funcționează proprietățile CSS float stânga și float right apar cu o regularitate de invidiat. Acesta devine un subiect deosebit de dureros pentru proiectanții de layout și programatori, care au asamblat layout-uri pe tabele de ani de zile, iar apoi sunt forțați să lucreze cu blocuri. În plus, acest lucru este agravat de problemele aspectului cossbrowser, deși recent acest subiect a devenit cumva mai puțin nervos pentru specialiști.

Oricum, în loc să răspund în mod constant la aceleași întrebări despre cum funcționează proprietatea CSS float left și float right, am decis să scriu o postare și să trimit la ea pe toți cei care suferă.

Vă asigur că nu va fi nimic deosebit de nou în această postare. Există o mulțime de informații similare pe net. Dar de fiecare dată m-am săturat să arăt un exemplu pe degete sau să caut un link unde să trimit un alt angajat de-al meu. Prin urmare, aici va fi prezentată o scurtă colecție cu ceea ce aveți de-a face cel mai adesea.

Blocuri într-un container cu proprietățile CSS float stânga și float dreapta setate

Problema tipica:

1. Există un container cu două blocuri sau mai multe.
2. Blocurile interioare au proprietatea CSS float stânga sau dreapta.
3. Dacă dimensiunea blocurilor nu este suficientă, atunci conținutul din partea de jos începe să se strecoare în bloc și întregul aspect este dispersat.

Ilustrațiile de mai jos arată câteva astfel de cazuri.

Situație cu două sau mai multe casete float stânga CSS

Ar trebui să fie:

Situație în care un bloc are o proprietate CSS float rămasă, iar altul are o proprietate dreaptă

Ar trebui să fie:

Cum arată cu un aspect eronat:

De ce s-a întâmplat această situație

Casetele noastre CSS float stânga și float right se află într-un container cu o umplutură de jos. În ciuda parametrilor aparent corecti, marginea de jos nu numai că nu funcționează, dar și conținutul blocurilor inferioare se târăște în blocul nostru superior.

Chestia este că blocurile cu proprietăți flotante date nu afectează modificarea înălțimii containerului lor.

De exemplu: în primul caz, toate blocurile din interiorul containerului plutesc. Prin urmare, înălțimea containerului va fi zero.

În al doilea caz, pe lângă blocurile plutitoare, avem și text în 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 interne plutitoare, nu veți observa problema. Dacă nu există suficient text, ca în exemplul de mai sus, atunci conținutul blocurilor inferioare va urca până la marginea de jos a containerului.

Soluția 1 adăugați bloc gol cu ​​clear: ambele proprietate CSS

Înainte de eticheta de închidere a containerului, plasați un bloc cu proprietatea clear: both CSS. Apoi containerul va fi extins la blocul de jos, deoarece această proprietate blochează influența blocurilor cu CSS float stânga și float right.

Exemplu de cod de pagină:

De asemenea, un bloc cu clear: ambele proprietăți pot fi plasate imediat după eticheta de închidere a containerului sau după ultimul bloc plutitor. Containerul nu își va schimba dimensiunea în această situație. Și, în mare, nu va fi necesar, ci un bloc cu clar: ambele proprietăți pur și simplu taie conținutul din blocurile plutitoare.

Exemplu de cod de pagină:

Cu toate acestea, nu toată lumea știe că câmpul de direcții corespunde determinantului unui sistem de ecuații liniare, ceea ce nu este surprinzător. În plus, determinantul sistemului de ecuații liniare restabilește categoric vectorul, așa cum era de așteptat. În apropierea punctului este încă solicitată. Lema, după cum reiese din cele de mai sus, stabilizează în esență seria divergentă abstractă, ceea ce ne va conduce fără îndoială la adevăr. Lema derulează inteligent logaritmul natural de nerefuzat; calculele ulterioare le vom lăsa elevilor ca o simplă temă.

Exemplu de cod CSS:

Container (afișare: bloc;) .in_block (afișare: bloc; float: stânga; lățime: 100px; înălțime: 100px; margine-dreapta: 10px;) .clear (afișare: bloc! Important; margine: 0px! Important; umplutură: 0px! Important; clar: ambele! Important; float: niciunul! Important; înălțime: 1px! Important; lățime: automat! Important;)

Metodic, aceasta nu este cea mai elegantă soluție, deși merită dreptul la viață, deoarece este destul de eficientă. Un dezavantaj evident este faptul că trebuie să adăugăm cod suplimentar textului paginii.

Soluția 2 pentru a specifica în mod explicit înălțimea containerului

Opțiunea de înălțime a containerului este bună numai dacă cunoașteți dimensiunea exactă a conținutului containerului. Atunci CSS-ul nostru va arăta cam așa:

Container (afișare: bloc; înălțime: 100 px;) .in_block (afișare: bloc; float: stânga; lățime: 100 px; înălțime: 100 px; margine-dreapta: 10 px;)

În cazul în care conținutul este dinamic sau aspectul este „cauciucat” și lățimea containerului se poate modifica, atunci aceasta nu va fi o soluție atât de bună.

Soluția 3 setează proprietatea CSS overflow pentru container

Dacă setați valoarea proprietății container revărsare egal auto sau ascuns, browserul va reconstrui containerul pentru a găzdui toate casetele plutitoare și nu va afișa barele de defilare.

Dacă setați proprietatea de overflow la automat, atunci fiți pregătiți pentru faptul că în unele situații pot apărea în continuare barele de defilare. Prin urmare, ar trebui să verificați cuprinzător aspectul în diferite moduri.

Exemplu de cod CSS:

Container (display: block; overflow: auto;) .in_block (display: block; float: stânga; lățime: 100px; înălțime: 100px; margine-dreapta: 10px;)

Două blocuri de la același nivel cu proprietățile CSS specificate plutesc la stânga și plutesc la dreapta

Situație tipică: text care se înfășoară în jurul a două blocuri cu un anumit conținut. În acest caz, blocurile sunt situate pe părțile laterale ale textului.

Ar trebui să fie:

Toate elementele care apar pe pagina HTML nu sunt altceva decât dreptunghiuri. Și practic doar două tipuri:

1. bloc (bloc), care ocupă toată lățimea unde se află și sunt separate de ceea ce este deasupra și dedesubtul lor. De exemplu, acestea sunt etichete DIV, P, H.
2. in linie. De exemplu, SPAN, STRONG, EM, A și IMG.

Mese.

Rolul proprietății a crescut după trecerea de la table-layout la div-layout. Acest lucru se datorează faptului că float permite unui dezvoltator web să includă coloane fără a recurge la un tabel. Poate prelua valori dreapta, stânga, dar nu centru.

Folosind proprietatea de afișare: bloc; sau afișare: inline; vom converti un tip de dreptunghi în altul. De exemplu, o listă UL care are un număr de LI-uri poate fi aranjată pe orizontală:

• PARAGRAF
• PARAGRAF
• PARAGRAF

• PARAGRAF
• PARAGRAF
• PARAGRAF

Când utilizați proprietatea float, dreptunghiul este blocat, dar cu o caracteristică specială: lățimea sa nu se va răspândi pe întregul conținut. De exemplu, titlul h3 arată astfel:

acesta este HEADER h3

Dacă setăm afișajul: inline; proprietate, atunci vom vedea că nu numai lățimea s-a schimbat, ci și distanța deasupra și dedesubtul elementului:

acesta este HEADER h3

Dar dacă vreau să poziționez elementul la dreapta și să adaug text-align: right; de data aceasta, obținem:

acesta este HEADER h3

Și cu totul altfel dacă float: corect ;. Rețineți că distanța de deasupra și dedesubtul elementului rămâne neschimbată:

acesta este HEADER h3

Cum se vor comporta elementele de lângă titlu?

Textul de sus rămâne neschimbat deoarece elementul flotant nu poate fi poziționat deasupra liniei în care a fost creat.

acesta este HEADER h3

Dar textul roșu se află sub titlu și se va înfășura în jurul lui fără niciun stil suplimentar. Și doar înălțimea h3 va fi depășită, pagina va reveni la ordinea naturală.

A B C D Mai multe elemente plutitoare vor urma succesiunea poziției lor.

ABVG text...

Și alinierea se face la marginea de jos a acelor litere care sunt pe o parte.

A B C D Dacă mergem astfel încât fluxul în jurul elementului să fie oprit dintr-un anumit moment (de aici), se aplică proprietatea clear. Îl putem adăuga la o etichetă goală

Pentru a așeza uniform mai multe dreptunghiuri bloc, dați-le aceeași lățime.

Unde este distanța dintre blocuri? Dacă sunt setate, elementele plutitoare vor rămâne fără spațiu și se vor deplasa în jos.
Problema este rezolvată prin adăugarea unui alt DIV:

Dispunerea tabelului este foarte convenabilă și de înțeles, motiv pentru care a apărut, probabil, afișajul său analog: tabel;. Aceeași formă se obține cu mai puțin cod.

unde margine-spațiere definește distanța orizontală și verticală dintre marginile celulei.

Acum puteți vedea cum este construită galeria de imagini. sper sa nu fi uitat nimeni.

Link-uri către surse:

Float este o proprietate CSS pentru poziționarea elementelor. Pentru a înțelege scopul și originea acestuia, puteți apela la designul tipărit. Într-un aspect tipărit, imaginile pot fi poziționate pe pagină astfel încât textul să se „înfășoare” în jurul lor. Aceasta se numește de obicei „încheierea textului”.

În programele de aranjare a paginii, elementele cu text pot lua în considerare imaginile, precum și le pot ignora. Dacă sunt ignorate, textul va fi afișat deasupra imaginilor, ca și când acestea nu ar fi acolo. Aceasta este principala diferență între dacă imaginile fac sau nu parte din fluxul principal al paginii. Designul web este foarte asemănător.

În designul web, elementele paginii plutitoare se comportă la fel ca imaginile din artele grafice atunci când textul curge în jurul lor. Astfel de elemente fac parte din fluxul principal al paginii web. Totuși, acest lucru nu este cazul dacă elementele folosesc poziționarea absolută. Elementele poziționate absolut sunt eliminate din fluxul principal al paginii, similar cu exemplul de mai sus, atunci când textul ignoră imaginile în imprimare. Astfel de elemente nu afectează poziția altor elemente, fie că se ating sau nu.

Proprietatea float este setată astfel:

#sidebar (float: dreapta;)

Există 4 valori în total pentru proprietatea float. Stânga și dreapta sunt folosite pentru direcțiile respective. Niciunul (implicit) - Se asigură că elementul nu plutește. Și moșteniți, care spune că comportamentul ar trebui să fie același cu elementul părinte.

Pentru ce poate fi folosit plutitorul?

Pe lângă împachetarea textului în jurul imaginilor, float poate fi folosit pentru a crea un aspect pentru un întreg site.

Proprietatea float este, de asemenea, utilă la scari mai mici. De exemplu, luați în considerare o zonă mică pe pagina unui site. Să presupunem că plutiți avatarul, când redimensionați imaginea, textul va fi redimensionat pentru a se potrivi cu imaginea.

Aceeași aranjare a obiectelor poate fi realizată folosind poziționarea. Obiectului container i se atribuie o poziționare relativă, iar obiectului imagine îi este atribuită o poziționare absolută. În acest caz, avatarul nu va afecta poziția textului.

Depășirea proprietății float

Pentru flotoare, proprietatea aferentă este clară. Orice element care are setată proprietatea clear nu va fi ridicat așa cum era de așteptat, ci va apărea mai jos, după float. Poate că exemplul din imagine o va explica mai bine decât cuvintele.

În exemplu, bara laterală este aliniată la dreapta (float: right;), iar înălțimea sa este mai mică decât zona principală de conținut. Prin urmare, subsolul va fi ridicat mai sus, deoarece există suficientă înălțime pentru el și acest lucru este cerut de comportamentul plutitorului. Pentru a remedia situația, trebuie să seteze proprietatea clear, care asigură că elementul este afișat sub elementele float.

#footer (clar: ambele;)

Proprietatea clear poate lua patru valori. Ambele, cea mai des folosită, sunt folosite pentru a inversa plutirea fiecărei direcții. Stânga și Dreapta sunt folosite pentru a anula flotarea uneia dintre direcții. Nici unul este implicit, de obicei nu este utilizat decât dacă doriți să ștergeți. Valoarea de moștenire ar fi a cincea valoare, dar în mod ciudat nu este acceptată în Internet Explorer. Anularea numai a flotoarelor la stânga sau la dreapta este mult mai puțin comună, dar cu siguranță are propriile sale scopuri.

Mare colaps

Un alt lucru uimitor despre proprietatea float este că utilizarea acesteia poate afecta elementul părinte. Dacă un astfel de element conține doar elemente flotante, atunci se prăbușește literalmente, adică înălțimea sa este zero. Acest lucru nu este întotdeauna vizibil dacă elementul părinte nu are niciun set de fundal vizibil.

Un astfel de colaps pare ilogic, dar alternativa este și mai rea. Luați în considerare acest exemplu:

Dacă un element la nivel de bloc din partea de sus este mărit automat pentru a găzdui toate elementele plutitoare, atunci vom obține o pauză nefirească în text între paragrafe, fără nicio modalitate de a o remedia. Dacă ar fi așa, designerii noștri s-ar plânge mult mai mult de acest comportament decât de colaps.

Astfel, prăbușirea este aproape întotdeauna necesară pentru a preveni dificultățile de aspect. Pentru a schimba acest comportament, trebuie să adăugați un element non-float după elementele float, dar înainte ca elementul părinte să fie închis.

Metode de anulare flotant

Dacă știți că un alt element (de exemplu, un subsol) va fi întotdeauna afișat după elementele float, atunci trebuie doar să setați proprietatea clear pentru el: ambele; , ca în exemplul de mai sus și continuați-vă afacerea. Acest lucru este ideal, deoarece nu necesită hack-uri sau elemente suplimentare. Desigur, nu totul în viața noastră este atât de lin și există momente când această metodă nu este suficientă. Prin urmare, trebuie să aveți mai multe metode suplimentare în arsenalul dvs.

• Metoda div gol. Folosit, literalmente, un div gol.
  ... Uneori un element poate fi folosit în locul lui
  sau altele, dar div este folosit cel mai des pentru că implicit nu are nici un stil, nici un scop special și este puțin probabil să fie stilat generic prin CSS. Este posibil ca această tehnică să nu fie pe placul celor cărora le place markupul curat semantic, deoarece prezența unui div gol nu are semnificație contextuală și este plasată pe pagină doar din motive de design. Desigur, strict vorbind, au dreptate, dar el își face treaba și nu face rău nimănui.
• Metoda overflow. Pe baza faptului că elementul părinte trebuie să aibă proprietatea de overflow setată. Dacă valoarea acestei proprietăți este setată la automat sau ascuns, atunci elementul părinte va crește pentru a conține toate elementele flotante. Această metodă pare mai corectă din punct de vedere semantic, deoarece nu necesită elemente suplimentare. Cu toate acestea, dacă veți folosi un alt div doar pentru a utiliza această abordare (adică div-ul părinte), atunci va fi același ca exemplul anterior, cu un div gol adăugat. De asemenea, rețineți că proprietatea de overflow este pentru alte scopuri. Aveți grijă să nu permiteți o parte din conținutul dvs. să dispară sau să apară bare de defilare inutile.
• Metodă simplă de curățare. Această metodă folosește minunatul pseudoselector CSS -: after. Mult mai bine decât utilizarea overflow pe elementul părinte. Pur și simplu îi setați o clasă suplimentară, astfel: .clearfix: după (conținut: "."; Vizibilitate: ascuns; afișare: bloc; înălțime: 0; clar: ambele;) float. Și apropo, aceasta nu este toată povestea despre cum ar trebui folosit codul suplimentar în browserele mai vechi.

Și, după cum vă puteți imagina, fiecare dintre metode este folosită în situații diferite. Luați, de exemplu, o grilă de elemente bloc de diferite tipuri.

Pentru o prezentare vizuală mai bună, ar fi bine să combinați astfel de blocuri. De exemplu, dorim ca fiecare tip să înceapă pe o linie nouă, în cazul nostru tipul elementului este determinat de culoare. Putem folosi metoda overflow sau „metoda simplă de curățare” dacă fiecare grup are propriul său element container. Sau putem folosi o metodă div goală între fiecare dintre grupuri. Trei elemente container sau trei div-uri goale, care este cel mai bine pentru sarcina ta - depinde de tine.

Probleme de plutire

Flotatoarele sunt adesea ocolite deoarece trebuie manipulate cu foarte multă atenție. Majoritatea erorilor au venit cu IE6. Pe măsură ce tot mai mulți designeri web renunță la suportul pentru IE6, este posibil să nu fiți îngrijorat de aceste probleme. Dar pentru cei cărora le pasă, iată o listă scurtă.

Alternative de plutire

Dacă trebuie să înfășurați text în jurul imaginii, atunci nu există alternative. Dar pentru aspectul paginii, există cu siguranță o alegere. Există câteva abordări foarte interesante care combină flexibilitatea float-ului cu puterea poziționării absolute. În CSS3 există un așa-numit Modul de aspect al șablonului care va oferi o alternativă decentă de plutire în viitor.