Aflați mai multe despre proprietatea float. Cum funcționează proprietățile CSS float left și float right
După ce am fost întrebat pentru a șaizeci și opta oară de ce un bloc cu float este afișat incorect, am decis să scriu această notă, care ar explica situațiile tipice cu care se confruntă un designer de layout începător și, de asemenea, pentru a oferi pur și simplu un link către aceasta articol data viitoare.
Disclaimer
Nu sunt un designer profesionist de layout, deși din cauza naturii activității mele a trebuit să amenajez mai mult de o duzină de site-uri web. Am prieteni care învață aspectul și vreau să-i ajut. Cel mai probabil le ai si tu. Scopul acestui articol nu este de a spune ceva nou, ci de a vorbi despre vechi din punctul de vedere al celor mai frecvente probleme cu care se confruntă designerii de layout începători. Nu pretind adevărul absolut al cuvintelor mele și mă voi bucura doar dacă mă corectați și completați.Proprietăți ale unui element cu float pe care ar trebui să le ții mereu în minte
dacă este setat la stânga sau la dreapta- Elementul este afișat ca blocuri, parca ar avea proprietatea display: block;
- Element lățimea este comprimată la dimensiunea conținutului, cu excepția cazului în care lățimea este setată în mod explicit pentru element;
- Element bastoane la marginea stângă (stânga) sau dreapta (dreapta);
- Toate celelalte conținutul paginii în cod HTML după element cu plutitor, îl înfășoară;
Incidentul de viață #1
Am două blocuri, am aplicat float: direct la unul dintre blocuri, aliniat la dreapta, dar tot a rămas sub primul. Un exemplu de cum arată.
Cauză
Dacă se întâmplă acest lucru, înseamnă că ați aplicat float nu primului bloc, ci celui de-al doilea. Datorită faptului că un element flotant (unul cu float) este transmis doar de acele elemente care apar în codul HTML după acesta, primul bloc nu va curge în jurul lui.De asemenea, elementele bloc au în mod implicit lățimea maximă posibilă (dovadă) în cadrul părintelui. Elementul dvs. plutit pur și simplu nu se potrivește cu primele elemente de bloc cu lățime maximă, așa că este împins în jos.
De asemenea Toate conținutul site-ului care vine în cod HTML după elementele plutitoare curg în jurul lor, ceea ce duce adesea la un efect neașteptat.
Soluţie
Soluția #1. Setați explicit înălțimea containerului. În cazurile în care se știe care ar trebui să fie dimensiunile recipientului, aceasta este cea mai simplă soluție.Soluția #2. Adăugați un bloc gol cu clear: ambele . Adăugarea unui astfel de element înlătură „flotabilitatea” blocurilor și face ca containerul să se întindă la înălțimea sa maximă. Din punct de vedere semantic, aceasta nu este cea mai bună soluție, deoarece introduce un element de markup suplimentar.
Soluția #3. Aplicați proprietatea overflow: auto (sau ascunsă) pe container. Determină containerul să recalculeze înălțimea și să o modifice pentru a include elemente plutitoare, altfel ar trebui să adauge o bară de defilare sau să le ascundă. Cu toate acestea, acest lucru se întâmplă uneori, așa că aveți grijă.
UPD
Citește și din ca o continuare a discuției despre proprietatea float.
Întrebările despre cum funcționează proprietățile CSS float left ș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 pus laolaltă machete pe tabele de ani de zile, iar acum sunt forțați să lucreze cu blocuri. În plus, acest lucru este agravat de problemele legate de aspectul cossbrowser, deși recent acest subiect a început cumva să diminueze nervii specialiștilor.
În orice caz, în loc să răspund în mod constant la aceleași întrebări despre cum funcționează proprietățile CSS float left și float right, am decis să scriu o postare și să trimit tuturor celor care suferă la ea.
Vă asigur că nu va fi nimic deosebit de nou în această postare. Există o mulțime de informații de acest fel pe internet. Dar de fiecare dată când arăt un exemplu pe degete sau caut un link unde să trimit următorul meu angajat, sunt deja obosit. Prin urmare, aici vă vom prezenta o scurtă colecție cu ceea ce întâlnim cel mai des.
Blocurile dintr-un container cu proprietățile CSS float left și float right setate
Problema tipica:
- Există un container cu două blocuri sau mai multe.
- Blocurile interioare au proprietatea CSS float stânga sau dreapta setată.
- Dacă dimensiunea blocului nu este suficientă, atunci conținutul de dedesubt începe să se încadreze în bloc și întregul aspect se destramă.
Ilustrațiile de mai jos arată câteva astfel de cazuri.
Situația cu două sau mai multe blocuri cu CSS float a lăsat proprietatea
Ar trebui să fie:
Situația în care un bloc are proprietatea CSS plutește la stânga, iar altul are dreptul
Ar trebui să fie:
Cum arată dacă aspectul este incorect:
De ce s-a întâmplat această situație?
Blocurile noastre cu proprietățile CSS float left și float right sunt situate în interiorul unui container căruia i se oferă o umplutură în partea de jos. În ciuda parametrilor aparent corecti, indentarea de jos nu numai că nu funcționează, dar și conținutul blocurilor inferioare se strecoară în blocul nostru superior.
Chestia este că blocurile cu proprietăți flotante specificate 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 se va extinde până la marginea de jos a containerului.
Soluția 1 Adăugați un bloc gol cu proprietatea CSS clară: ambele
Înainte de eticheta containerului de închidere, trebuie să plasați un bloc cu proprietatea CSS clear:both. Apoi containerul va fi extins la blocul de jos, deoarece această proprietate blochează influența blocurilor cu proprietățile CSS float left și float right.
Exemplu de cod de pagină:
De asemenea, puteți plasa un bloc cu proprietatea clear:both imediat după eticheta de închidere a containerului sau după ultimul bloc plutitor. Containerul nu își va schimba dimensiunea în această situație. Și, în general, nu va fi necesar, ci un bloc cu proprietatea clear:both pur și simplu decupează conținutul blocurilor plutitoare.
Exemplu de cod de pagină:
Cu toate acestea, nu toată lumea știe că câmpul de direcție corespunde determinantului unui sistem de ecuații liniare, ceea ce nu este surprinzător. Mai mult, determinantul unui sistem 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ă semnificativ seria divergentă abstractă, ceea ce ne va conduce fără îndoială la adevăr. Lema dezvăluie în mod semnificativ logaritmul natural irefutabil, vom lăsa elevilor calcule ulterioare ca simple teme.
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 !importante: ambele !importante;
Metodologic, nu este cea mai elegantă soluție, deși merită dreptul la viață, deoarece este destul de eficientă. Un dezavantaj clar este faptul că trebuie să adăugăm cod suplimentar textului paginii.
Soluția 2: specificați în mod explicit înălțimea containerului
Opțiunea de setare a înălțimii recipientului este bună doar dacă cunoașteți exact dimensiunea așteptată a conținutului acestui recipient. 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 „fluid” și lățimea containerului se poate modifica, atunci aceasta nu va fi o soluție atât de bună.
Soluția 3: Setați proprietatea CSS overflow pe container
Dacă setați valoarea proprietății containerului revărsare egal auto sau ascuns, browserul va reconstrui containerul astfel încât să se potrivească tuturor blocurilor plutitoare și să nu afișeze bare de defilare.
Dacă setați proprietatea de overflow la automat, atunci fiți pregătiți pentru faptul că barele de defilare pot apărea în continuare în unele situații. Prin urmare, ar trebui să verificați cu atenție 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
O 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:
În design web modern, proprietatea pluti folosit aproape la fiecare pas. Dar, în ciuda acestei prevalențe, nu toată lumea înțelege mecanismul blocurilor plutitoare, comportamentul lor și ce consecințe poate avea utilizarea lor.
Ce este „float”?
Pluti Aceasta este o proprietate de poziționare CSS. Pentru a înțelege esența și originea acesteia, trebuie să acordați atenție designului imprimat. În machetele tipărite, imaginea poate fi poziționată astfel încât textul să curgă în jurul ei. Aceasta se numește de obicei „ împachetarea textului".
Într-un aspect de pagină, un bloc care conține text poate fi specificat pentru a fi utilizat împachetarea textului în jurul unei imagini sau ignorați ambalajul. Ignorarea împachetare a textului va permite cuvintelor să curgă peste imagine ca și cum nu ar fi acolo. Acest lucru face diferența dacă imaginea face parte din fluxul de pe pagină sau nu. În web design totul este foarte asemănător.
În design web, 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 este destul de diferit de elementele poziționate absolut, care sunt îndepărtate din flux, ca și cum într-un aspect tipărit blocului de text i s-a spus să ignore împachetarea 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ția locației - stânga și respectiv dreapta. Nici unul- valoarea implicită, indică faptul că elementul nu plutește și moşteni instruirea unui element să moștenească valoarea unei proprietăți pluti din elementul părinte.
Pentru ce se folosește plutitorul?
Dincolo de exemplul simplu de împachetare a textului în jurul unei imagini, pluti poate fi folosit pentru a crea machete web.
Pluti, este, de asemenea, convenabil de utilizat pentru elementele de layout mici. De exemplu, să luăm 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 funcție de 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 în interiorul acestuia. Dar într-un aspect implementat conform acestei scheme, modificarea dimensiunii imaginii nu va afecta blocul de text, deoarece elementele cu poziționare absolută nu afectează alte elemente și alte elemente nu le afectează.
Wrap reset
clar proprietate legată de proprietate pluti. Element cu set de proprietăți clar nu se va deplasa în sus în jurul unui element cu proprietatea setată pluti, dar se va deplasa în jos ignorând fluxul. Ș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 în spațiul liber de sub bara laterală, curgând în jurul blocului cu conținutul principal. Pentru a rezolva această problemă, trebuie să specificați o valoare pentru proprietatea clear:both a subsolului pentru a „șterge” fluxul din jurul ambelor coloane.
#footer ( clar: ambele; ) 
Proprietate clar are patru sensuri. Ambii folosit pentru a elibera curgerea în ambele direcții. StângaȘi Dreapta sunt folosite pentru a reseta o direcție - stânga sau, respectiv, dreapta. Nici unul- valoare implicită. Moşteni ar putea fi a cincea valoare, dar în mod 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.
Marele Colaps
Un lucru despre lucrul cu pluti Ceea ce este surprinzător este efectul pe care această proprietate îl are 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ă elementul părinte nu are un fundal proeminent, dar este important de reținut.
Dar alternativa la un astfel de colaps este și mai rea. Luați în considerare următorul scenariu:
Dacă blocul de sus se extinde automat pentru a găzdui elementul plutitor, vom ajunge cu un decalaj în fluxul de text între paragrafe, fără nicio modalitate de a-l remedia. Dacă ar fi așa, atunci dezvoltatorii s-ar plânge mult mai des de acest comportament al blocurilor plutitoare decât fac acum despre colaps.
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ă se închidă.
Tehnici de anulare a ambalajului
Dacă vă aflați într-o situație în care știți unde va fi următorul element, puteți folosi clear:both și vă ocupați de afacerea dvs. Acest lucru este ideal, deoarece nu necesită niciun hack sau elemente suplimentare. Dar, din păcate, de obicei nu totul merge așa cum ne dorim, iar în acest caz puteți folosi următoarele instrumente.
Metoda blocului gol.
Este literalmente un bloc gol.
. Uneori poți găsi un element
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 proprietăților CSS revărsare pentru elementul părinte. Dacă această proprietate este setată la auto sau ascuns pentru elementul părinte, se va extinde după elementul plutitor, resetând efectiv învelișul său 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 (:after) 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; )
Aceasta folosește o mică bucată de conținut ascuns vederii, situată după elementul părinte, care resetează wrap-ul. Această metodă nu este completă, deoarece trebuie îmbunătățită pentru a suporta browsere mai vechi.
Situații diferite necesită metode diferite de ameliorare cacealma. Să luăm ca exemplu o grilă de diferite tipuri de blocuri.
Pentru a combina vizual mai bine blocurile similare, ar trebui să începem o nouă linie atunci când culoarea se schimbă. Putem folosi metoda overflow sau light clearing dacă fiecare grup de culori are un element părinte. Sau folosim metoda blocurilor goale între grupuri. Trei blocuri părinte care nu existau anterior sau trei blocuri goale care nu existau anterior. Depinde de tine să decizi care metodă este mai bună.
Probleme cu elementele plutitoare
Elementele plutitoare sunt adesea criticate din cauza fragilității 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, s-ar putea să nu 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ă elementul din interiorul blocului plutitor este mai lat decât acel bloc (acest lucru se întâmplă de obicei cu imagini). Majoritatea browserelor vor afișa elementul plutit în afară, dar acest lucru nu va avea niciun efect asupra aspectului. IE va extinde blocul plutitor și adesea acest lucru are 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ă- un alt lucru de reținut când lucrați cu IE6. Acest bug se exprimă prin faptul că dacă câmpul este pe aceeași parte cu care este orientat pluti, terenul este dublat. De exemplu:
Vom intra în câmpul din stânga 40px., în loc de 20px.
Soluție rapidă la problemă: Setați afișarea: în linie pentru blocul plutitor și nu vă faceți griji, elementul va rămâne la nivel de bloc.
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 unui câmp de forță situat în jurul elementului plutitor. Soluție rapidă la problemă: Setați lățimea și înălțimea textului afectat.
Apare în IE7 Bug marginea inferioară, atunci când elementul părinte este un element plutitor și copilul său situat în interiorul acestuia este și un element plutitor. Marginea inferioară (marja-inferioară) a copilului este ignorată de elementul strămoș. Soluție rapidă la problemă: Folosiți padding-bottom pe elementul părinte în loc de margin-bottom pe elementul copil.
În urmă cu câțiva ani, când dezvoltatorii au început să treacă la markup HTML fără tabele, proprietatea CSS float a preluat brusc un rol foarte important. Motivul pentru care proprietatea float a devenit atât de comună a fost că, în mod implicit, elementele bloc nu s-au aliniat unul lângă celălalt într-un format bazat pe coloane. Deoarece coloanele sunt necesare în aproape fiecare schemă CSS, această proprietate a devenit obișnuită și chiar abuzată.
Proprietate float în CSS, permite dezvoltatorului să includă coloane asemănătoare tabelelor în markup HTML fără a utiliza tabele. Dacă nu pentru proprietate pluti, atunci layout-urile CSS nu ar fi posibile altfel decât folosind poziționarea absolută și relativă - care ar fi neglijent și ar face aspectul de neîntreținut.
În acest articol vă vom spune ce este o proprietate plutiși modul în care afectează elementele în contexte specifice. De asemenea, vom arunca o privire la unele dintre diferențele care pot apărea cu această proprietate în browserele cele mai frecvent utilizate. În cele din urmă, vom demonstra câteva aplicații practice ale proprietății pluti. Acest lucru ar trebui să ofere, de asemenea, o discuție cuprinzătoare și amănunțită despre această proprietate și impactul acesteia asupra dezvoltării CSS.
Definiția și sintaxa proprietății CSS Float
Scopul proprietății float este de a împinge un element bloc la stânga sau la dreapta, scoțându-l din fluxul documentului. Acest lucru permite conținutului curent să se prăbușească în mod natural în jurul elementului plutitor. Acest concept este similar cu ceea ce vedeți în fiecare zi în literatura tipărită, unde fotografiile și alte elemente grafice sunt aliniate pe o parte, iar conținutul (de obicei text) curge natural în jurul elementului aliniat în jurul marginii din stânga sau din dreapta.
Imaginea de mai sus arată secțiunea „Cititori” a site-ului revistei .net cu 3 fotografii de cititor care sunt lăsate aliniate în coloanele lor cu text înfășurat în jurul imaginilor. Aceasta este ideea de bază din spatele proprietății float în layout-urile CSS și demonstrează una dintre tehnicile utilizate în proiectarea tabelară.
Eficacitatea utilizării floaturilor în amenajări cu mai multe coloane a fost explicată de Douglas Bowman în 2004 în prezentarea sa clasică No More Tables:
Bowman a explicat principiile din spatele aspectului fără masă, folosind un vechi site Microsoft ca referință. Floatoarele au fost folosite în mod proeminent în revizuirea sa falsă a marcajului Microsoft.
Sintaxă
Proprietatea Float poate lua una dintre cele 4 valori: stânga, dreapta, niciunul și moștenire. Aceasta este declarată așa cum se arată în codul de mai jos:
#sidebar (float: stânga; )
#bara laterală ( plutește la stânga; |
Cele mai frecvent utilizate valori sunt stânga și dreapta. Valoarea none sau valoarea inițială float pentru orice element de pagină HTML este valoarea implicită. Valoarea de moștenire, care poate fi aplicată aproape tuturor proprietăților CSS, nu funcționează în versiunile de Internet Explorer, inclusiv 7.
Proprietatea float nu necesită aplicarea unei alte proprietăți elementului float, cu toate acestea, pentru a funcționa corect, float va funcționa mai eficient în anumite circumstanțe.
De obicei, un element plutitor ar trebui să aibă lățimea stabilită în mod explicit(cu excepția cazului în care este un element înlocuit, ca o imagine). Acest lucru asigură că float se comportă conform așteptărilor și ajută la evitarea problemelor în unele browsere.
#sidebar ( float: stânga; lățime: 350px; )
#bara laterală ( plutește la stânga; latime: 350px; |
Caracteristicile elementelor plutitoare
Următoarea este o listă a comportamentului elementelor plutitoare, conform specificației CSS2:
Un bloc flotant la stânga va fi plutit spre stânga până când marginea sa din stânga (sau limita marginii dacă nu există margine) atinge fie marginea conținutului blocului, fie marginea altui bloc plutit.
Dacă dimensiunea unui bloc flotant depășește spațiul orizontal disponibil, atunci blocul flotant va fi deplasat în jos
Elementele bloc nepoziționate, neflotate acționează ca elemente plutitoare, de ex. este în afara fluxului de documente
Marginile unui bloc flotant nu se vor potrivi cu marginile blocurilor adiacente
element rădăcină ( ) nu poate fi flotat
Un element inline, unul care este flotat, este convertit într-un element bloc
Plutește în practică
Cel mai obișnuit caz de utilizare pentru proprietatea float este flotarea unei imagini cu text care o învelește. De exemplu:
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, torttor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
CSS-ul aplicat imaginii din caseta de mai sus arată astfel:
img ( float: stânga; margine: 0 15px 5px 0; chenar: solid 1px #bbb; )
img ( plutește la stânga; marjă : 0 15px 5px 0 ; chenar : solid 1px #bbb ; |
Singura proprietate care poate realiza acest efect este proprietatea float. Celelalte proprietăți (marja și marginea) sunt acolo din motive estetice. Alte elemente din bloc (etichete
Cu text în ele) nu au nevoie de niciun stil.
După cum sa menționat mai devreme, elementele plutitoare sunt împinse în afara fluxului documentului, iar alte elemente bloc rămân în flux, acționând ca și cum elementul plutit nici măcar nu ar fi acolo. Acest lucru este demonstrat vizual mai jos:
Această casetă este plutită spre stânga
Acest
Elementul are o culoare de fundal diferită pentru a arăta că se întinde pe lățimea părintelui său, ignorând elementul flotant. Acest text inline, totuși, se înfășoară în jurul casetei plutitoare.
În exemplul de mai sus
element la nivel de bloc, deci ignoră elementul plutit care se întinde pe lățimea containerului (minus umplutura). Toate elementele de tip bloc care nu sunt flotante se vor comporta similar.
Textul dintr-un paragraf este inline, deci încapsulează elementul flotant. Blocului flotant i se oferă, de asemenea, opțiuni de marjă pentru a-l deplasa față de paragraful, făcându-l curat vizual, astfel încât elementul de paragraf să ignore blocul flotant.
Plutitoare de curățare
Problemele de aspect cu float sunt de obicei rezolvate prin utilizarea proprietății clear CSS, care vă permite să „ștergeți” elementele flotante din stânga sau dreapta, sau ambele.
Să ne uităm la un exemplu care este adesea văzut - un subsol care se înfășoară în partea dreaptă a unui aspect cu 2 clonuri:
Coloana din stânga a plutit spre stânga
Dacă te uiți la pagina IE6 și IE7, nu vei vedea probleme. Coloanele din stânga și din dreapta sunt la locul lor, iar subsolul este în partea de jos. Dar în Firefox, Opera, Safari și Chrome, veți vedea că subsolul se mută din loc. Acest lucru este cauzat de aplicarea float pe coloane. Acesta este un comportament corect, deși este mai problematic. Pentru a rezolva această problemă, folosim proprietatea clear de mai sus, relativ la subsol:
#footer ( clar: ambele; )
#subsol ( clar: ambele; |
Rezultatul este prezentat mai jos:
Coloana din stânga a plutit spre stânga
Coloana din dreapta a plutit și la stânga
Proprietatea clear va șterge numai elementele flotante, așa că aplicarea clear: ambelor coloane nu ar face ca subsolul să scadă, deoarece subsolul nu este un element flotant.
Proprietatea clear va șterge numai elementele plutitoare. Utilizarea clear este aceasta: ambele coloane nu vor omite subsolul deoarece nu este un element flotant.
Așadar, utilizați clear pe elementele care nu sunt flotante și chiar uneori pe elementele flotante, pentru a forța elementele paginii să ocupe pozițiile desemnate.
Remedierea abandonului părinților
Una dintre cele mai comune caracteristici ale markupului float este „leave-parent”. Acest lucru este demonstrat în exemplul de mai jos:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum torttor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre.
Observați că baza imaginii plutitoare apare în afara părintelui. Părinte nu este complet extins pentru a conține o imagine plutitoare. Acest lucru este cauzat de ceea ce am discutat mai devreme: elementul flotant este în afara fluxului natural al documentului, deși toate elementele blocului sunt afișate, dar elementul flotant nu este acolo. Acesta nu este un bug CSS, totul este conform specificațiilor CSS. Toate browserele fac același lucru în acest exemplu. Trebuie spus că, în acest exemplu, adăugarea lățimii containerului poate preveni problema în IE, dar ar trebui să rezolve problema și pentru Firefox, Opera, Safari sau Chrome.
Soluția 1: Plutește pentru container
Cel mai simplu mod de a rezolva această problemă este să plutiți elementul părinte:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum torttor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre.
Containerul se extinde acum pentru a găzdui toate elementele copil. Dar, din păcate, această remediere va funcționa doar într-un număr limitat de cazuri, deoarece părintele plutitor poate avea consecințe nedorite asupra aspectului dvs.
Soluția 2: Adăugați un marcaj suplimentar
Aceasta este o metodă învechită, dar este o opțiune simplă. Pur și simplu adăugați un element suplimentar în partea de jos a recipientului și „curățați-l”. Iată cum va arăta codul HTML după implementarea acestei metode:
XHTML
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum torttor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum torttor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. |
Și, ca rezultat, CSS-ul este aplicat noilor elemente:
Clearfix ( clar: ambele; )
Clearfix ( clar: ambele; |
Puteți face acest lucru și prin intermediul
etichetați cu stilul curent. În orice caz, veți obține rezultatul dorit: containerul părinte se va extinde pentru a include toți copiii săi. Dar această metodă nu este recomandată deoarece adaugă cod non-semantic la marcaj.
Soluția 3: pseudo-elementul după
Pseudo-elementul :after adaugă un element la pagina HTML redată. Această metodă a fost folosită pe scară largă pentru a rezolva problemele de curățare a plutitorilor. Iată cum arată CSS-ul:
Clearfix:după (conținut: "."; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns; )
Clearfix:după ( continut: "." ; afisare: bloc; inaltime: 0; clar: ambele; vizibilitate: ascuns; |
Clasa CSS „clearfix” se aplică oricărui container care are copii float și nu se extinde pentru a le include.
Dar această metodă nu funcționează pentru Internet Explorer până la versiunea 7, așa că pentru IE trebuie să utilizați una dintre următoarele opțiuni:
Clearfix ( afișare: bloc inline; ) .clearfix ( zoom: 1; )
Clearfix ( display: inline-block; Clearfix ( zoom: 1; |
În funcție de tipul de problemă, aveți de-a face cu una dintre cele două soluții care vor rezolva această problemă în Internet Explorer. Trebuie remarcat faptul că proprietatea zoom nu este o proprietate standard Microsoft și, prin urmare, CSS-ul dvs. va deveni invalid.
Deoarece pseudo-elementul :after nu funcționează în IE6/7, codul este puțin umflat și complicat și este necesar un stil suplimentar care nu este valabil doar pentru IE, deci această soluție nu este cea mai bună modalitate, dar este probabil cel mai bun la care ne-am uitat încă.
Soluția 4: Proprietatea overflow
De departe, cel mai bun și mai ușor mod de a rezolva problema abandonului părintelui este să adăugați overflow: hidden sau overflow: auto la elementul părinte. Este clar, ușor de întreținut, funcționează în aproape toate browserele și nu adaugă niciun marcaj inutil.
Observați că am spus „aproape” în toate browserele. Acest lucru se datorează faptului că nu funcționează în IE6. Dar, în multe cazuri, containerul părinte va avea o lățime stabilită, ceea ce rezolvă problema în IE6. Dacă containerul părinte nu are o lățime, puteți adăuga un stil unic IE6 cu următorul cod:
// Această remediere este doar pentru IE6 .clearfix (înălțime: 1%; overflow: vizibil; )
// Această remediere este doar pentru IE6 Clearfix ( înălțime: 1%; preaplin: vizibil; |
În IE6, proprietatea înălțime este tratată incorect ca înălțime minimă, astfel încât acest lucru obligă containerul să-și includă copiii. Proprietatea Overflow este apoi setată din nou la „vizibil” pentru a se asigura că conținutul nu este ascuns sau derulat.
Singurul dezavantaj al folosirii metodei overflow (în orice browser) este posibilitatea ca conținutul elementului să aibă bare de defilare sau să ascundă conținutul. Dacă există elemente cu margini negative sau poziționare absolută în părinte, acestea vor fi ascunse dacă se extind dincolo de părinte, așa că această metodă trebuie folosită cu atenție. De asemenea, trebuie remarcat faptul că, dacă elementul conținut ar avea o înălțime specificată sau o înălțime minimă, atunci cu siguranță nu ați putea folosi metoda de overflow.
Deci, nu este chiar ușor să rezolvi această problemă încrucișată. Dar aproape orice problemă de curățare a plutitorului poate fi rezolvată prin una dintre metodele de mai sus.
Erori de float asociate în Internet Explorer
De-a lungul anilor, au existat numeroase articole publicate online care discută despre erorile comune asociate cu float în marcajul CSS. Toate, deloc surprinzător, se ocupă de probleme specifice Internet Explorer. Mai jos, veți găsi o listă de link-uri către o serie de articole care discută probleme legate de float:
Modificarea proprietății float folosind JavaScript
Pentru a modifica o valoare CSS în JavaScript, trebuie să accesați stilul obiectului prin conversia proprietății CSS intenționate într-un „caz Camel” De exemplu, proprietatea CSS „margin-left” devine marginLeft, proprietatea background-color devine BackgroundColor. , și așa mai departe. Dar cu proprietatea float, lucrurile stau diferit deoarece cuvântul float este deja rezervat în JavaScript. Prin urmare, următoarele vor fi incorecte:
Stil. styleFloat = "stânga" ;
// Pentru toate celelalte browsere
myDiv. stil. cssFloat = "stânga" ;
Utilizarea practică a Float
Float poate fi folosit pentru a rezolva o serie de probleme în marcajul CSS. Câteva exemple sunt descrise aici.
2 coloane, latime fixa
3 coloane, aspect cu înălțime egală
Imagine plutitoare cu titlu.
Similar cu ceea ce am discutat mai devreme în Float in Practice, Max Design descrie modul în care flotarea unei imagini cu un titlu permite textului să se înfășoare în jurul ei în mod natural.
Navigare orizontală cu liste neordonate
Proprietatea float este o componentă cheie în codarea barelor de navigare orizontale bazate pe sprite. Chris Spooner de la Line25 descrie crearea Menu of Awesomeness, care etichetează
Pentru a demonstra importanța proprietății float în acest exemplu, iată o captură de ecran a aceleiași imagini după ce ați folosit firebug pentru a elimina float: left:
Galerii foto bazate pe grilă
O simplă utilizare a proprietății float este să float:left o serie de fotografii conținute într-o listă neordonată, care produce același rezultat ca ceea ce ați vedea în marcajul tabelului.
Pagina de produse Foremost Canada (vezi imaginea de mai sus) își afișează produsele într-un format de grilă lângă o bară laterală. Fotografiile sunt afișate ca o listă neordonată cu o proprietate float, pentru toți
Pagina futoane a lui Paragon Furniture (vezi imaginea de mai sus) este un alt exemplu de pagină de produs care folosește o listă neordonată cu etichete flotante
Pagina cu rezultatele căutării iStockphoto (vezi imaginea de mai sus) are aceeași grilă de fotografii structurate, aici fotografiile conțin float:left
Aliniere câmpuri cu un buton
Modelarea elementelor de formular implicite pentru diferite browsere poate fi problematică. Adesea, într-un câmp de formular, cum ar fi un formular de căutare, trebuie să puneți element de lângă butonul „trimite”.
După ce am fost întrebat pentru a șaizeci și opta oară de ce un bloc cu float este afișat incorect, am decis să scriu această notă, care ar explica situațiile tipice cu care se confruntă un designer de layout începător și, de asemenea, pentru a oferi pur și simplu un link către aceasta articol data viitoare.
Disclaimer
Nu sunt un designer profesionist de layout, deși din cauza naturii activității mele a trebuit să amenajez mai mult de o duzină de site-uri web. Am prieteni care învață aspectul și vreau să-i ajut. Cel mai probabil le ai si tu. Scopul acestui articol nu este de a spune ceva nou, ci de a vorbi despre vechi din punctul de vedere al celor mai frecvente probleme cu care se confruntă designerii de layout începători. Nu pretind adevărul absolut al cuvintelor mele și mă voi bucura doar dacă mă corectați și completați.Proprietăți ale unui element cu float pe care ar trebui să le ții mereu în minte
dacă este setat la stânga sau la dreapta- Elementul este afișat ca blocuri, parca ar avea proprietatea display: block;
- Element lățimea este comprimată la dimensiunea conținutului, cu excepția cazului în care lățimea este setată în mod explicit pentru element;
- Element bastoane la marginea stângă (stânga) sau dreapta (dreapta);
- Toate celelalte conținutul paginii în cod HTML după element cu plutitor, îl înfășoară;
Incidentul de viață #1
Am două blocuri, am aplicat float: direct la unul dintre blocuri, aliniat la dreapta, dar tot a rămas sub primul. Un exemplu de cum arată.
Cauză
Dacă se întâmplă acest lucru, înseamnă că ați aplicat float nu primului bloc, ci celui de-al doilea. Datorită faptului că un element flotant (unul cu float) este transmis doar de acele elemente care apar în codul HTML după acesta, primul bloc nu va curge în jurul lui.De asemenea, elementele bloc au în mod implicit lățimea maximă posibilă (dovadă) în cadrul părintelui. Elementul dvs. plutit pur și simplu nu se potrivește cu primele elemente de bloc cu lățime maximă, așa că este împins în jos.
De asemenea Toate conținutul site-ului care vine în cod HTML după elementele plutitoare curg în jurul lor, ceea ce duce adesea la un efect neașteptat.
Soluţie
Soluția #1. Setați explicit înălțimea containerului. În cazurile în care se știe care ar trebui să fie dimensiunile recipientului, aceasta este cea mai simplă soluție.Soluția #2. Adăugați un bloc gol cu clear: ambele . Adăugarea unui astfel de element înlătură „flotabilitatea” blocurilor și face ca containerul să se întindă la înălțimea sa maximă. Din punct de vedere semantic, aceasta nu este cea mai bună soluție, deoarece introduce un element de markup suplimentar.
Soluția #3. Aplicați proprietatea overflow: auto (sau ascunsă) pe container. Determină containerul să recalculeze înălțimea și să o modifice pentru a include elemente plutitoare, altfel ar trebui să adauge o bară de defilare sau să le ascundă. Cu toate acestea, acest lucru se întâmplă uneori, așa că aveți grijă.
UPD
Citește și din SelenIT2 ca o continuare a discuției despre proprietatea float.
