Totul despre proprietatea float. Ce este valoarea float în CS: GO? Ce este float în css

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ă după elementele float, un alt element (de exemplu, un subsol) va fi întotdeauna afișat, 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. Iubitorilor de marcaj curat din punct de vedere semantic s-ar putea să nu le placă această tehnică, 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.

Stabilește la ce parte va fi aliniat elementul, cu alte elemente curgând în jurul lui din alte părți. Când proprietatea float nu este niciuna, elementul se redă pe pagină ca de obicei, permițând în același timp ca o linie de text care curge să fie pe aceeași linie cu elementul însuși.

informatie scurta

Sintaxă

float: stânga | dreapta | nici unul

Denumiri

	Descriere	Exemplu
<тип>	Indică tipul valorii.	<размер>
A && B	Valorile trebuie afișate în ordinea afișată.	<размер> && <цвет>
A | B	Indică faptul că ar trebui selectată doar una dintre valorile sugerate (A sau B).	normal | litere mici
A || B	Fiecare valoare poate fi folosită singură sau împreună cu altele, în orice ordine.	lățime || numara
	Grupează valori.	[cultură || traversa]
*	Repetați de zero sau de mai multe ori.	[,<время>]*
+	Repetați una sau mai multe ori.	<число>+
?	Tipul, cuvântul sau grupul specificat este opțional.	medalion?
(A, B)	Repetați cel puțin A, dar nu mai mult de B ori.	<радиус>{1,4}
#	Repetați o dată sau de mai multe ori, separate prin virgule.	<время>#

Valorile

stânga Aliniază un element la stânga și toate celelalte elemente, cum ar fi textul, curg la dreapta. dreapta Aliniază elementul la dreapta, iar toate celelalte elemente curg spre stânga. none Înfășurarea în jurul elementului nu este specificată.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la ora unsprezece dimineața, pentru că la această oră micul dejun se terminase deja de mult și nici măcar nu se gândise să înceapă prânzul. Și, desigur, a fost teribil de încântat să-l vadă pe Rabbit scoțând cești și farfurii.

img (float: ((playgroundValue));)

Exemplu

Behaviorismul, oricât de paradoxal ar părea, luminează stimulul sublimat, de exemplu, Richard Bandler a folosit o schimbare a submodalităților pentru a construi stări eficiente.

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Utilizarea proprietății float

Model de obiect

Un obiect.style.cssFloat

Notă

Internet Explorer 6 vede o eroare dublă de umplere la stânga sau la dreapta pentru elementele plutitoare imbricate în elementele părinte. Căptușeala care este adiacentă laturii părintelui este dublată. Problema este de obicei rezolvată prin adăugarea display: inline la elementul plutit. Acest browser adaugă, de asemenea, o umplutură de 3px (numită „bun de trei pixeli”) în direcția dată de valoarea float.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Această specificație a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că acesta este în concordanță cu obiectivele sale, dar este necesar ajutorul comunității de dezvoltatori pentru implementarea standardului.
• Recomandare propusă ( Recomandare sugerată) - În acest moment, documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a proiectului după discuții și amendamente pentru revizuirea comunității.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după editarea de către editorii de proiect.
• Ciornă ( Proiect de specificație) este primul proiect al standardului.

Browsere

Browsere

Următoarele convenții sunt utilizate în tabelul browserului.

Descrie proprietatea CSS în detaliu pluti, caracteristicile aplicației și subtilitățile utilizării, sunt date tipurile de poziționare a elementelor HTML.

Vreau să remarc că pentru începători, cele de mai sus pot părea confuze și complicate, dar vă asigur că fără să cunoașteți regulile de redare a elementelor de către un browser, nu veți deveni un bun layout designer. Prin urmare, vă sfătuiesc să aveți răbdare.

Terminologie

Pentru a evita ambiguitatea, să cădem de acord asupra termenilor.
Pluti(element plutitor) - sub pluti sau un element plutitor într-un articol înseamnă un element bloc cu o proprietate CSS setată pluti — dreapta sau stânga.
Box- Termenul box se referă la un dreptunghi imaginar care cuprinde fiecare element HTML. În conformitate cu terminologia în limba engleză, acest dreptunghi imaginar va fi numit cutie.
Dacă nu este foarte clar despre box, atunci vă recomand cu tărie să vă familiarizați mai detaliat cu cutiile și proprietățile lor, deoarece acest termen este adesea folosit în articol și, cel mai important, este baza întregului aspect HTML.
Notă. Mai departe în text va apărea cuvinte subliniate... Astfel, vreau să atrag o atenție deosebită asupra unei proprietăți sau calități specifice a unui element.

Tipuri de poziționare a elementelor HTML

Pentru o prezentare clară a celor de mai sus, trebuie să cunoașteți și principiile de bază ale afișării elementelor în documentele HTML.
Potrivit w3.org, marcajul WEB utilizează trei aspecte pentru elementele din documentele Web.
Debit normal- În CSS 2.1, fluxul normal al unui document Web include elemente reprezentate ca casete cu casete, elemente formatate ca casete inline și poziționarea relativă a casetelor și casetelor inline.
Cu alte cuvinte, fluxul normal include elemente de layout obișnuite care nu au niciun set pluti egal cu stanga dreapta, sau poziţie egal cu absolut / fix .
Pluti- un element plutitor este plasat mai întâi în conformitate cu regulile de amplasare într-un flux normal, apoi este îndepărtat din acest flux și deplasat în linia sa la stânga sau la dreapta, pe cât posibil.
Fiți clar cu privire la următoarea regulă importantă. Deoarece elementele plutitoare sunt derivate din fluxul normal al documentului, casetele bloc ale fluxului normal nu le văd, dar casetele inline ale fluxului normal le văd și curg pe o parte; casetele inline, în special, includ textul obișnuit al casetelor de bloc. Aceasta înseamnă că, dacă, în plasarea lor, cutiile de bloc de flux normal nu acordă nicio atenție prezenței cutiilor plutitoare, atunci conținutul acestor cutii (elemente inline) curge în jurul acestor elemente.
Poziționare absolută- cu pozitionare absoluta, cutia se scoate complet din fluxul normal (nu le afecteaza pe cele ulterioare) si se aseaza fata de pozitia recipientului sau, adica elementul in care se afla.
Puteți citi puțin mai multe despre fluxurile de documente HTML în articol

Diferențele dintre flotoare și elementele poziționate

La început, pentru orice eventualitate, permiteți-mi să vă reamintesc care este diferența dintre plutirea ( pluti) și poziționat ( poziţie) elemente. Un element relativ poziționat cu o valoare poziție: relativă rămâne în fluxul normal al documentului, dar este deplasat în raport cu poziția sa, în timp ce celelalte elemente nu sunt afectate și rămân acolo unde erau. Acest lucru permite elementelor poziționate relativ să se suprapună pe elementele din jur pe pagină. Dacă articolul are poziție: absolută; sau poziție: fixă; apoi este scos din fluxul normal și plasat conform regulilor absolute de poziționare.
Un element plutitor este întotdeauna îndepărtat din fluxul normal al documentului și afectează amplasarea elementelor din jur.

Acum să începem.

Ce este plutitorul?

„Float” este una dintre proprietățile CSS ale unui element de marcare la nivel de bloc care face ca un element HTML să plutească în poziția extremă din stânga sau din dreapta disponibilă pentru plasare în containerul său. Dacă lățimea recipientului nu are suficient spațiu pe linia curentă pentru a-l potrivi, acesta este mutat pe următoarea linie până când se poate potrivi. Rețineți că lățimea pluti un element este determinat de conținutul său. În funcție de valoarea setată pluti, elementele inline se pot înfășura în jurul unui astfel de element bloc de-a lungul uneia dintre laturile sale orizontale.
Proprietate pluti poate lua următoarele valori: nici unul(Mod implicit), stânga, dreapta și moșteniți.

Reguli pentru redarea elementelor float

Ce se întâmplă când browserul întâlnește un element care are o proprietate pluti diferit de nici unul?
La început, o astfel de cutie este plasată ca un element obișnuit, apoi este îndepărtată din fluxul normal și deplasată spre stânga sau dreapta până când întâlnește același pluti un element sau marginea containerului său părinte. Dacă nu mai rămâne suficient spațiu orizontal pentru un element, browserul îl mută la următoarea linie a containerului său.
În măsura în care pluti element extras din fluxul normal, elemente bloc normale fără nicio proprietate setată pluti nu știu despre existența lui și sunt plasate în modul obișnuit, fiecare pe o linie nouă. Elemente de marcare în linie „vezi” pluti cutie și curge în jurul ei pe una dintre laturi în funcție de valoare - stânga sau dreapta.
Pentru o demonstrație clară a celor spuse, voi da următorul exemplu.

Acesta este ceea ce afișează browserul.

Demonstrarea redării elementelor float

Acum să ne dăm seama ce s-a întâmplat. Exemplul arată 4 blocuri, box1 și box2 sunt redate implicit de browser, adică în flux normal, iar elementele interne au float = stânga... Pentru a face exemplul mai clar, am adăugat o culoare de fundal și o umplutură la blocuri. Deci, în final, blocurile implicite (1 și 4) au fost afișate, ca de obicei, fiecare pe o linie nouă și ocupă întreaga lățime ( deoarece este afișată captura de ecran a marcajului, lățimea casetelor este limitată de lățimea imaginii). Cele plutitoare (a 2-a și a 3-a) au fost îndepărtate din fluxul normal (adică, casetele 1 și 4 nu le văd, prin urmare „caseta normală 2” începe sub 1 de la începutul liniei) și mutate la marginea stângă a containerului. Și deși casetele normale de bloc nu văd casete plutitoare, caseta inline a ultimei casete (și acesta este textul său) vede casete plutitoare și curge în jurul lor din partea dreaptă.
După cum puteți vedea, totul este în conformitate cu algoritmul de randare de mai sus. pluti elemente.

Cum sunt folosite flotoarele

Există două moduri principale de a folosi o proprietate pluti.
Să le luăm în considerare.

Înfășurați textul în jurul imaginii.

În marcajul HTML, imaginile sunt adesea folosite și orice elemente dreptunghiulare. Proprietatea float este utilizată pe scară largă pentru a păstra textul în jurul lor, mai degrabă decât pe linia care urmează acestor dreptunghiuri.

Textul se înfășoară în jurul imaginii cu float: stânga

Exemplu de aspect de pagină cu text înfășurat în jurul imaginii.

CSS
img.alignleft (float: stânga; margine: 0 10px 10px 0)

În codul de mai sus și elementul plutitor img iar textul de ambalare se află în interiorul aceluiași container p.
Rețineți că umplutura a fost adăugată la CSS din stânga și din dreapta pentru elementul plutitor. Este o practică obișnuită să adăugați spațiu între imagine și textul din jur.

Aspecte de coloane

Proprietate Pluti permite poziționarea a două elemente de bloc unul lângă celălalt, în loc să înceapă pe o linie nouă. Această proprietate a floats este foarte utilă pentru a crea coloane într-un document. Pentru a obține un aspect cu 2 coloane, este suficient să flotați (adică să setați proprietatea float) la două DIV.
Un exemplu de creare a unui aspect cu 2 coloane folosind float.

HTML
‹Div id =" wrapper "›
‹Div id =" coloana din stânga "› ‹div›
‹Div id =" coloana din dreapta "› ‹/div›
‹/Div›

CSS
# coloană din stânga (float: stânga)
# coloană din dreapta (float: stânga)

În exemplu, ambele DIV-uri interioare au fost plutite spre stânga, rezultând 2 coloane. De asemenea, trebuie să vă asigurați că lățimea totală a celor două coloane interioare (div) nu depășește lățimea casetei părinte, altfel a doua coloană va sări într-o nouă poziție, sub prima coloană.
Prin adăugarea unui div de antet pe 2 coloane și a unui div de subsol folosind proprietatea clar, veți obține un aspect simplu și frumos cu 2 coloane.

Și încă un sfat. Setați întotdeauna lățimea elementului plutit, altfel puteți obține consecințe nedorite.

Depășirea proprietății float

Adesea când lucrezi cu pluti uneori este necesar ca elementele de marcare ulterioare să nu fie amplasate lângă curentul plutitor, dar, ca de obicei, pe linia următoare, adică trebuie să reveniți la plasarea elementelor în conformitate cu fluxul normal.
Acest lucru se realizează adesea prin utilizarea proprietății clar... Proprietate clar ia valori stânga, dreapta, ambele, niciunul(implicit) și moşteni... În practică, se folosesc primele 3 valori, iar în marea majoritate a cazurilor le vei folosi clar: ambele.
Cel mai adesea, poate, clar este folosit pentru a seta div-urile de subsol sub cele 2 sau 3 coloane flotante.

Ai grija. Când este folosit după un element plutit într-o cutie nouă, regulile cu clar, readuceți această casetă la fluxul normal, dar în același timp proprietatea acesteia margine-topîncetează să funcționeze. Adesea, această situație este corectată prin plasarea unui div gol cu ​​proprietatea în fața casetei necesare în fluxul normal clar —

... Din motive de corectitudine, trebuie remarcat faptul că o astfel de tehnică este considerată corectă din punct de vedere tehnic, dar incorectă din punct de vedere semantic, deoarece apare gol în document div recipient.

Container plutitor

Primul lucru de făcut atunci când folosiți un container pentru elemente plutitoare este să vă asigurați că containerul este suficient de lat pentru a se potrivi cu elementele unul lângă celălalt. Dacă setați pe două elemente proprietatea plutește la stânga pentru a crea un aspect cu 2 coloane, iar lățimea totală a elementelor este mai mare decât lățimea containerului, atunci unul dintre elemente va sări la linia următoare. Acest lucru se va întâmpla din cauza faptului că a doua coloană nu va avea suficient spațiu pentru a sta în caseta părinte de lângă prima coloană. Mai jos sunt imagini care ilustrează o situație similară.

Am menționat mai devreme că elementele plutitoare sunt îndepărtate din fluxul normal al documentului. Acest lucru duce la o problemă interesantă și confuză în care toate elementele din interiorul containerului plutesc. Acesta este de obicei cazul, de exemplu, atunci când în containerul div al antetului paginii Web există o imagine de siglă cu proprietatea plutește la stânga... În antet, de asemenea, de obicei cu ajutorul proprietății imagine de fundal este furnizată orice imagine de fundal. Aceasta se adaugă la un container în flux normal, care conține un element plutitor și un element gol în flux normal, deoarece imaginea este afișată în fundal. Problema este că antetul div conține un singur element nevid - o imagine de logo plutitoare care a ieșit din fluxul normal. Prin urmare, browserul consideră că div-ul titlului este gol și își setează înălțimea la zero. Se spune adesea că containerul s-a prăbușit. Există mai multe modalități de a rezolva această problemă. Puteți seta în mod explicit înălțimea div-ului containerului să fie cel puțin înălțimea imaginii. Acest lucru va funcționa bine pentru un titlu precum exemplul de mai sus, dar din mai multe motive acest lucru nu este întotdeauna posibil. Uneori adăugați un div gol cu ​​proprietatea setată clar pentru a preveni plutirea următoarelor elemente.

HTML
‹Div class =" clear "› ‹/div›

CSS
.clear (clar: ambele;)

Acest lucru este util dacă vi se permite să aveți un spațiu alb după elementele plutitoare, deoarece unele browsere pentru div-uri goale pot avea valori finale implicite pentru înălțime, margine, umplutură etc.
Există, de asemenea, o metodă de utilizare a proprietății revărsareîn elementul părinte. Utilizați de obicei debordare: ascuns dar in functie de situatie puteti folosi preaplin: automat sau preaplin-yîn loc să folosiți această proprietate în ambele sensuri. Folosind o proprietate revărsare protejează containerul părinte împotriva prăbușirii.

Probleme de plutire

Pe lângă problema prăbușirii containerului, proprietatea float are o serie de alte probleme.
Versiunile mai vechi de Internet Explorer au o eroare de dublă indentare ( marginea). Dacă elementele curg în aceeași direcție și se adaugă și elemente margineaîn aceeași direcție (stânga/stânga sau dreapta/dreapta), IE dublează magnitudinea marginea... O soluție ușoară este setarea proprietății display: inline pentru un element plutitor, apropo, această proprietate ajută la scăparea altor dăunători de gândaci de măgar. Alternativ, puteți utiliza comentarii condiționate pentru a seta anumite marginea pentru IE sau pentru versiuni individuale de IE.
O altă problemă este adăugarea de elemente în interiorul unui element plutitor, unde lățimea elementelor adăugate este mai mare decât lățimea containerului. Puteți, de exemplu, să adăugați o imagine în interiorul unui element plutit, astfel încât lățimea imaginii să fie mai mare decât lățimea containerului. În funcție de browser, acest lucru poate face ca float-ul dvs. să fie mai lat decât este prevăzut sau conținutul se suprapune cu imaginea dvs. Asigurați-vă că elementele din interiorul flotorului nu depășesc lățimea flotorului.
Există și problema cu dispariția căptușelii inferioare ( margine-fond). Umplutura inferioară a unui element plutitor în interiorul altor plutitoare poate fi ignorată. Soluția este folosirea căptușeală in loc de marginea dacă asta se întâmplă.

Totaluri flotante

Când învață CSS, începătorii gravitează spre poziționarea absolută și relativă, deoarece par mai ușori. Dar, de obicei, cea mai bună practică este să folosiți float. Dacă vă amintiți câteva puncte cheie, veți avea o bună înțelegere și control asupra elementelor plutitoare din machetele dvs.

• Elementele flotante sunt așezate în fluxul normal al documentului, apoi sunt plutite la stânga sau la dreapta în cadrul elementului părinte în funcție de valoarea flotantă și sunt eliminate din fluxul normal al documentului.
• Etichete de valoare pluti devin automat elemente de bloc.
• Cutii bloc cu instalate pluti sunt situate unul lângă altul atâta timp cât există suficient spațiu pentru ele. Dacă nu este suficient spațiu în container, acestea vor apărea sub elementele plutitoare.
• Lățimea casetei cu proprietatea setată pluti determinat de lăţimea conţinutului său. Se recomandă să setați lățimea flotantă pentru elemente la marcare, altfel rezultatul poate fi imprevizibil, recomandarea nu se aplică imaginilor, deoarece lățimea este implicită pentru acestea.
• Elementele plutitoare și poziționate sunt diferite și se comportă diferit. Nu puteți folosi proprietăți plutiși poziţieîntr-un singur articol.
• Pentru a reseta proprietatea wrap pentru elementele ulterioare, utilizați proprietatea CSS clar.
• Pluti cutia este scoasă din fluxul principal, astfel încât elementele blocului în flux normal sunt așezate ca și cum nu ar fi acolo, dar cutiile în linie ale acelor elemente fac loc blocului plutitor.
• Un container cu elemente exclusiv plutitoare are înălțime zero, de atunci elementele float sunt scoase din fluxul normal, astfel încât părintele crede că este gol. Există modalități de a combate acest efect fără markup suplimentar, vă puteți familiariza cu ele, de exemplu,.
• Spre deosebire de elementele mainstream, marginile verticale pluti cutiile nu sunt îmbinate cu marginile cutiilor învecinate.
• Găsiți cele mai potrivite soluții pentru a rezolva problemele de afișare corectă a elementelor float în Internet Explorer.

Sperăm că cele de mai sus vă vor ajuta să clarificați o parte din confuzia când utilizați proprietățile CSS. pluti.

Proprietatea Float este un activ puternic și puternic pentru dezvoltatorii web HTML și CSS. Pe de altă parte, poate fi frustrant și confuz dacă nu înțelegeți pe deplin cum funcționează.

Traducerea unui articol CSS Float 101... Original alistapart.com

De asemenea, în trecut, din cauza unor bug-uri destul de neplăcute în browser, era normal să devină nervos atunci când utilizați proprietatea plutiîn seturile dvs. de reguli CSS. Dar haideți să ne liniștim nervii și să încercăm să atenuăm frustrarea. Îți voi arăta exact ce face proprietatea float elementelor tale și cât de convenabil este să o folosești.

Vedem flotoare în fiecare zi în lumea tipăritului atunci când ne uităm la un articol de revistă cu o imagine în stânga sau în dreapta și text bine plasat în jurul lui. În lumea HTML/CSS, textul se va înfășura în jurul unei imagini în funcție de proprietatea float care este aplicată acelei imagini. Utilizarea proprietății float pe o imagine este doar un exemplu din multe. De exemplu, cu proprietatea float putem face aspectul popular pe două coloane foarte ușor. De fapt, puteți flota orice element din HTML. Odată ce ați învățat și ați înțeles utilizarea proprietății float, împreună cu proprietatea poziției, vă puteți simți confortabil și încrezător în crearea oricărui aspect.

Definiție flotant

Să începem prin a defini ce este pluti.

Float este în mod convențional o cutie care se deplasează la dreapta sau la stânga de-a lungul liniei curente. Cea mai interesantă caracteristică a float este că conținutul poate curge de-a lungul lateralului său. Când utilizați proprietatea float: left, conținutul se va înfășura în jurul casetei în jos din partea dreaptă și, în mod similar, cu float: right, în jos din partea stângă.

Proprietatea float are 4 valori pe care le putem aplica: stânga, dreapta, inherent și niciunul. Fiecare semnificație se explică de la sine. De exemplu, dacă plutiți: stânga către un element, acesta va pluti la marginea din stânga cea mai îndepărtată a părintelui său. Și, dacă setați float: right, atunci elementul se va muta în mod similar la dreapta. Valoarea ihnerit spune elementului să moștenească proprietatea de la părintele său. Și ultima valoare none este implicită și spune să nu aplicați proprietatea pluti la acest articol.

#container (lățime: 960px; marjă: 0 automat;) #conținut (float: stânga; lățime: 660px; fundal: #fff;) #navigație (float: dreapta; lățime: 300px; fundal: #eee;) #footer ( clar: ambele; fundal: #aaa; umplutură: 10px;)

#subsolul nostru este blocat sub blocul de #navigație. Acest lucru s-a întâmplat deoarece există un loc pentru #footer sub blocul #navigation și acesta este comportamentul corect pentru fluxul normal al aspectului blocului. Dar, acest lucru nu este absolut ceea ce ne dorim, nu-i așa? Presupun că puteți vedea deja relația dintre float și clar și puteți înțelege cum se completează reciproc.

Dacă aveți o tulburare obsesiv-compulsivă ca mine, este posibil să fi observat în Exemplul F diferitele înălțimi ale coloanelor #conținut și #navigație; există mai multe soluții, dar asta depășește scopul acestui articol. Recomand cu căldură să citești Faux Columns de Dan Cederholm pentru a învăța cum să faci blocuri de aceeași înălțime, indiferent de conținutul din interior.

Plutește mai întâi

Până acum, am văzut câteva exemple destul de simple care nu creează prea multe dureri de cap. Există, totuși, câteva capcane de luat în considerare atunci când utilizați proprietatea float. În mod surprinzător, una dintre cele mai mari capcane nu este CSS, ci HTML. Plasarea elementului flotant în HTML poate produce rezultate diferite. Aruncă o privire la Exemplul H.

Aici avem un bloc mic care are o imagine float: dreapta cu text înconjurător. CSS-ul nostru arată astfel:

#container (lățime: 280 px; margine: 0 automat; umplutură: 10 px; fundal: #aaa; chenar: 1 px solid # 999;) img (float: dreapta;)

Elementul nostru părinte, #container, are o lățime îngustă și menține elementul nostru flotant (imaginea) în limitele sale. Codul nostru HTML arată astfel:

Acest exemplu ne oferă rezultatul dorit, dar ce se întâmplă dacă luăm și rearanjam unele elemente în HTML? În exemplul I, m-am mutat după text

Rezultatul nostru nu este ceea ce ne așteptam. Imaginea noastră s-a mutat la dreapta, dar nu mai este în colțul de sus așa cum ne dorim, ci a căzut sub paragraf; și mai rău, iese din partea de jos a părintelui nostru #container. Ce se întâmplă?

In primul rand. Regula mea de bază pe care am găsit-o pentru mine este să plutesc mai întâi elementele. În HTML-ul meu, adaug aproape întotdeauna elemente flotante la începutul markupului meu și în fața elementelor mele preferate neflotate cu care vor interacționa elementele mele flotante, cum ar fi paragraful din exemplul de mai sus. În cele mai multe cazuri, acest lucru dă un rezultat pozitiv.

În al doilea rând. Motivul pentru care imaginea pare să iasă în partea de jos a blocului nostru #container are ceva de-a face cu ceva numit prăbușire. Să vorbim despre colaps și despre opțiunile de soluție.

Se prăbușește

Restrângerea este atunci când un element care are orice număr de elemente flotante nu își va extinde granițele în jurul elementelor imbricate, așa cum s-ar întâmpla dacă elementele imbricate nu ar fi flotate.

Acum să încercăm să rezolvăm acest lucru cu CSS în loc să adăugăm un markup HTML suplimentar documentului nostru, așa cum am făcut înainte. Există o metodă care permite elementului părinte să „aplice” proprietatea clear după toate elementele flotante. Pentru a face acest lucru, utilizați proprietatea CSS overflow cu valoarea ascunsă. Vă rugăm să rețineți că proprietatea de overflow nu a fost destinată acestei utilizări și poate cauza unele probleme, cum ar fi ascunderea conținutului sau apariția unei bare de derulare nedorite. Pentru exemplul nostru, totuși, vom aplica în continuare proprietatea overflow: hidden pentru #containerul nostru părinte:

#container (depășire: ascuns; lățime: 260 px; margine: 0 automat; umplutură: 10px 0 10px 10px; fundal: #aaa; chenar: 1px solid # 999;)

Și, în sfârșit, Eric Meyer explică a treia soluție la această problemă în articolul său Containing Floats. Conform CSS Spec 2.1:

un element cu proprietatea float își va extinde granițele pentru elementele flotante în interior.

Astfel, prin aplicarea proprietății float la #container, containerul nostru va conține imaginea și paragraful nostru, similar cu metodele descrise mai sus.

În cele din urmă, toate aceste decizii fac la fel. Ele fac elementele părinte să-și numere elementele plutitoare în flux. Fiecare dintre metode are propriile sale merite și utilitate. Trebuie să le înțelegeți pe fiecare și apoi să le aplicați pe cele care funcționează cel mai bine pentru situația dvs.

Concluzie

Folosind proprietatea float vă puteți îmbunătăți dramatic tehnica de layout. Înțelegerea modului în care funcționează această proprietate și a ceea ce îi afectează comportamentul vă va oferi o bază solidă pentru utilizarea eficientă a plutitorilor.

Î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 în jurul 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 clear: ambele proprietate 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 cărora le pasă 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.