Plutitor - CSS-Tricks

floatProprietatea în CSS este folosit pentru poziționarea și dispunerea pe paginile web.

.module ( float: left; )

Valori

• none: elementul nu plutește. Aceasta este valoarea inițială.
• left: plutește elementul în stânga containerului său.
• right: plutește elementul în dreapta containerului său.
• inherit: elementul moștenește direcția de plutire a părintelui său.

Notă: un element care este plutit este automat display: block;

Ce înseamnă Float?

Pentru a înțelege scopul și originea float, putem căuta să imprimăm designul. Într-un aspect de imprimare, imaginile pot fi setate în pagină astfel încât textul să se înfășoare în jurul lor, după cum este necesar. Aceasta se numește în mod obișnuit și adecvat „text wrap”. Iată un exemplu în acest sens.

În programele de dispunere a paginilor, casetelor care conțin textul li se poate spune să onoreze textul sau să îl ignore. Ignorarea textului va permite cuvintelor să curgă chiar deasupra imaginii de parcă nici măcar nu ar fi fost acolo. Aceasta este diferența dintre acea imagine care face parte din fluxul paginii (sau nu). Designul web este foarte asemănător.

În designul web, elementele de pagină cu floatproprietatea CSS aplicată acestora sunt la fel ca imaginile din aspectul de imprimare în care textul curge în jurul lor. Elementele plutitoare rămân o parte a fluxului paginii web. Acest lucru este distinct diferit de elementele de pagină care utilizează poziționarea absolută. Elementele de pagină poziționate absolut sunt eliminate din fluxul paginii web, ca atunci când i s-a spus căsuței de text din aspectul de imprimare să ignore înfășurarea paginii. Elementele de pagină poziționate absolut nu vor afecta poziția altor elemente, iar alte elemente nu le vor afecta, indiferent dacă se ating sau nu.

Demo

Această demonstrație prezintă un articol cu ​​două imagini: una setată la float: leftși una setată la float: right. Apăsați butonul „comutați plutitoarele” pentru a comuta plutitoarele off și pornit.

Vedeți Exemplul Float Pen de CSS-Tricks (@ css-tricks) pe CodePen.

Plute pentru aspect

În afară de exemplul simplu de înfășurare a textului în jurul imaginilor, flotantele pot fi folosite pentru a crea machete web întregi .

Flotantele sunt, de asemenea, utile pentru aspect în instanțe mai mici. Luați de exemplu această mică zonă a unei pagini web. Dacă folosim floatpentru imaginea noastră de avatar, atunci când imaginea respectivă își schimbă dimensiunea, textul din casetă se va reface pentru a o adapta:

Același aspect ar putea fi realizat folosind poziționarea relativă pe container și poziționarea absolută pe avatar. Dar, atunci când se face în acest fel, textul nu ar fi afectat de avatar și nu ar putea să reflueze o schimbare de dimensiune.

Demo

Această demonstrație arată un avatar cu float: leftaplicație. Apăsați butonul „comutați dimensiunea imaginii” pentru a vedea o versiune mai largă a imaginii avatarului. Observați că textul revine pentru a se potrivi imaginii în loc să treacă peste imagine.

Vedeți Demo-ul Pen Float de CSS-Tricks (@ css-tricks) pe CodePen.

Goliți plutitorul

Proprietatea soră a lui Float este clear. Un element care are clearproprietatea setată pe el nu se va deplasa în sus adiacent plutitorului ca și dorințele plutitorului, ci se va deplasa în jos pe lângă plutitor. Din nou, o ilustrare este mai utilă decât cuvintele:

În exemplul de mai sus, bara laterală este plutită spre dreapta și este mai scurtă decât zona principală de conținut. Footerul este apoi necesar să sară în acel spațiu disponibil, așa cum este cerut de flotant. Pentru a remedia această problemă, subsolul poate fi șters pentru a vă asigura că rămâne sub ambele coloane plutite.

#footer ( clear: both; )

Clear are și patru valori valabile. Valoarea botheste cea mai frecvent utilizată, care șterge plutitorii care vin din ambele direcții. Valorile leftși rightpot fi utilizate pentru a șterge plutitorul dintr-o singură direcție, respectiv. Valoarea inițială este none, care este de obicei inutilă, cu excepția cazului în care este utilizată pentru a elimina în mod explicit o clearvaloare care a fost setată. Valoarea inheritface ca elementul să moștenească valoarea părintelui său clear. În mod ciudat, Internet Explorer nu a acceptat această valoare până la IE8.

Ștergerea doar a leftsau rightplutitorul, deși este mai puțin văzută în sălbăticie, are cu siguranță utilizările sale.

Marele prăbușire

Unul dintre lucrurile mai uimitoare legate de lucrul cu flotante este modul în care acestea pot afecta elementul care le conține (elementul „părinte”). Dacă un element părinte nu conține altceva decât elemente plutite, înălțimea sa se prăbușește la nimic. Acest lucru nu este întotdeauna evident dacă părintele nu conține niciun fundal vizibil vizibil, dar este important să fie conștienți.

Oricât de contraintuitiv ar părea colapsul, alternativa este mai rea. Luați în considerare acest scenariu:

Dacă elementul bloc de deasupra ar fi trebuit să se extindă automat pentru a găzdui elementul plutit, am avea o pauză nefirească de spațiu în fluxul de text dintre paragrafe, fără o modalitate practică de a-l fixa. Dacă ar fi cazul, noi, designerii, ne-am plânge mult mai greu despre acest comportament decât despre colaps.

Colapsarea trebuie întotdeauna tratată pentru a preveni aspectul ciudat și problemele legate de browser. O reparăm degajând plutitorul după elementele plutite din container, dar înainte de închiderea containerului.

Tehnici de curățare a plutitorilor

Dacă vă aflați într-o situație în care știți întotdeauna care va fi elementul care urmează, puteți aplica clear: both;valoarea respectivului element și puteți face afaceri. Acest lucru este ideal deoarece nu necesită hacks fantezie și nici elemente suplimentare care îl fac perfect semantic. Desigur, lucrurile nu funcționează așa și trebuie să avem mai multe instrumente de compensare a flotorului în cutia noastră de instrumente.

• Metoda Div Divizională este, literalmente, o divizare goală. . Uneori veți vedea un
element sau un alt element aleatoriu folosit, dar div este cel mai frecvent, deoarece nu are un stil implicit al browserului, nu are nicio funcție specială și este puțin probabil să aibă un stil generic cu CSS. Această metodă este disprețuită de puriștii semantici, deoarece nu are nicio semnificație contextuală pentru pagină și este acolo doar pentru prezentare. Desigur, în cel mai strict sens, au dreptate. Dar, face treaba și nu face rău nimănui.
• Metoda Overflow se bazează pe setarea overflowproprietății CSS pe un element părinte. Dacă această proprietate este setată la autosau hiddenpe elementul părinte, părintele se va extinde pentru a conține flotantele, ștergând-o efectiv pentru elementele următoare. Această metodă poate fi frumos semantică, deoarece nu poate necesita elemente suplimentare. Cu toate acestea, dacă vă găsiți adăugând un nou divdoar pentru a aplica acest lucru, este la fel de nesemantic ca divmetoda goală și mai puțin adaptabil. De asemenea, rețineți că proprietatea de revărsare nu este specifică pentru curățarea plutitorilor. Aveți grijă să nu ascundeți conținutul sau să declanșați bare de derulare nedorite.
• Metoda Easy Clearing (cunoscută și sub denumirea de „clearfix”) folosește un pseudoselector CSS inteligent ( :after) pentru a șterge plutitoarele. În loc să setați revărsarea pe părinte, aplicați o clasă suplimentară precum „clearfix”. Apoi aplicați acest CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

  Aceasta va aplica un pic de conținut, ascuns vizualizării, după elementul părinte care șterge float-ul. Aceasta nu este întreaga poveste, deoarece codul suplimentar trebuie utilizat pentru a se potrivi browserelor mai vechi. Notă: Consultați și acest fragment care ține evidența celor mai recente și mai bune în clearfixes, inclusiv în noul „micro clearfix”.

Diferite scenarii necesită diferite metode de compensare prin flotare. Luați de exemplu o grilă de blocuri, fiecare dintre diferite tipuri.

Pentru a conecta vizual mai bine blocurile similare, vrem să începem un rând nou după cum ne place, în acest caz când culoarea se schimbă. Am putea utiliza fie metoda de revărsare, fie metoda de curățare ușoară, dacă fiecare dintre grupurile de culori avea un element părinte. Sau, folosim metoda div goală între fiecare grup. Trei divs de împachetare care nu existau anterior sau trei după divs care nu existau anterior. Vă voi lăsa să decideți care este mai bine.

Probleme cu plutitoarele

Plutitoarele sunt adesea bătute pentru că sunt fragile. Majoritatea acestei fragilități provin din bug-uri din IE6 și IE7. Pe măsură ce aceste browsere se estompează în trecut, aceste bug-uri se estompează odată cu ele. Dar, merită totuși să le înțelegeți dacă vreodată trebuie să depanați un „OldIE”.

• Pushdown este un simptom al unui element din interiorul unui obiect plutitor care este mai lat decât plutitorul în sine (de obicei o imagine). Cele mai multe browsere vor reda imaginea în afara flotantului, dar nu vor avea o parte care să afecteze alt aspect. Versiunile vechi ale IE au extins float-ul pentru a conține imaginea, afectând adesea în mod drastic aspectul. Un exemplu obișnuit este o imagine care iese din conținutul principal, împingeți bara laterală în jos.
  

  

  Remediere rapidă: asigurați-vă că nu aveți nicio imagine care să facă acest lucru, utilizați overflow: hidden;pentru a tăia excesul.

• Bug cu marjă dublă - Un alt lucru de reținut atunci când aveți de a face cu IE 6 este că, dacă aplicați o marjă în aceeași direcție ca float, aceasta va dubla marja. Remediere rapidă: setați display: inlinepe flotor și nu vă faceți griji că va rămâne un element la nivel de bloc.
• 3px Jog este atunci când un text care este lângă un element de plutit este misterios lovit departe de 3px ca un câmp de forță ciudat în jurul float. Fixare rapidă: setați o lățime sau o înălțime pe textul afectat.
• În IE 7, eroarea de marjă inferioară a fost atunci când un părinte plutitor are copii plutitori în interiorul acestuia, marja inferioară a acestor copii este ignorată de părinte. Remediere rapidă: folosind în schimb căptușeala inferioară pe părinte.

Alternative

Dacă aveți nevoie de text înfășurat în jurul imaginilor, nu există într-adevăr alternative pentru float. Apropo, verificați această tehnică destul de inteligentă pentru a înfășura textul în jurul unor forme neregulate. Dar pentru aspectul paginii, cu siguranță există opțiuni. Eric Sol are un articol despre A List Apart, Faux Absolute Positioning, care descrie o tehnică foarte interesantă care combină în multe feluri flexibilitatea plutitorilor cu puterea poziționării absolute.

CSS3 abordează aspectul paginii în câteva moduri:

• Flexbox
• Aspect cu mai multe coloane
• Aspectul grilei

Au fost discutate plutitoare poziționate absolut (de exemplu, vă poziționați în mod normal ca normal, dar elementul este încă în măsură să afecteze alte elemente, cum ar fi înfășurarea textului în jurul său), dar cred că ideea a fost abandonată datorită similitudinilor cu alte idei de aspect mai robuste.

Video

Am făcut un screencast cu ceva timp în urmă explicând multe dintre aceste concepte plutitoare.

Legate de

• clear
• position

Mai multe informatii

• float în specificația W3C
• float la MDN

Suport pentru browser

Crom	Safari	Firefox	Operă	IE	Android	iOS
Toate	Toate	Toate	Toate	Toate	Toate	Toate