Î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 proprietatea clear: ambele a „footer” pentru a „șterge” ambalarea în jurul ambelor coloane.
#footer (clar: ambele;) 
Proprietate clar are patru sensuri. Ambii folosit pentru a reseta wrap în ambele direcții. Stângași Dreapta sunt folosite pentru a reseta o direcție - stânga sau, respectiv, dreapta. Nici unul este implicit. Moşteni poate fi a 5-a valoare, dar surprinzător nu este acceptată Internet Explorer... Resetarea doar a fluxului din stânga sau din dreapta este destul de rară, dar are beneficii practice.
Mare colaps
Un lucru de-a face pluti surprinzător este efectul acestei proprietăți asupra elementelor părinte. Dacă elementul părinte nu conține alte elemente decât un float, atunci înălțimea lui se prăbușește literalmente. Acest lucru nu este întotdeauna vizibil, mai ales dacă părintele nu are un trecut vizibil, dar este important să țineți cont de acest lucru.
Dar alternativa la un astfel de colaps este și mai rea. Luați în considerare următorul scenariu:
Dacă caseta de sus se extinde automat pentru a găzdui elementul plutitor, atunci obținem o întrerupere a fluxului de text între paragrafe, fără posibilitatea de a-l elimina. Dacă ar fi așa, atunci dezvoltatorii s-ar plânge mult mai des de acest comportament al blocurilor plutitoare decât de colapsul acum.
Colapsul trebuie reținut întotdeauna pentru a preveni comportamentul ciudat de aspect și problemele între browsere. Putem rezolva această problemă folosind clar după elementul plutitor din container, dar înainte ca containerul să fie închis.
Tehnici de anulare a împachetarii
Dacă te afli într-o situație în care știi unde va fi următorul element, poți folosi clear: ambele și mergi la treaba ta. Acest lucru este ideal, deoarece nu necesită hack-uri sau elemente suplimentare. Dar, din păcate, de obicei nu totul merge așa cum ne dorim și, în acest caz, puteți folosi următoarele instrumente.
Metoda blocului gol.
Este literalmente un bloc gol.
... Uneori poți găsi elementul
sau orice alt element aleatoriu, dar div este cel mai comun, deoarece nu are un stil implicit în browsere, nu are nicio funcție specială și este puțin probabil să fie în stilul CSS general. Această metodă este respinsă de puriștii semantici deoarece prezența ei nu are nicio semnificație contextuală pe pagină și este acolo doar pentru apariție. Desigur, în sens strict, au dreptate, dar el își face treaba și nu face rău nimănui.
Metoda overflow.
Bazat pe specificarea unei proprietăți CSS revărsare pentru elementul părinte. Dacă această proprietate este setată la auto sau ascuns pentru elementul părinte, apoi se va extinde după elementul plutit, curățând efectiv plutitorul din jurul lui pentru elementele ulterioare. Această metodă poate fi frumoasă din punct de vedere semantic, deoarece nu necesită elemente suplimentare. Cu toate acestea, după cum puteți vedea, am adăugat un nou div pentru a utiliza această metodă, care este echivalentă cu utilizarea unui bloc nesemantic gol și este mai puțin flexibilă. De asemenea, trebuie amintit că proprietatea revărsare nu are scopul de a dezactiva împachetarea. Aveți grijă să nu ascundeți accidental conținutul sau să nu provocați bare de defilare nedorite.
Metodă ușoară de curățare.
Utilizează un pseudo-selector CSS (: după) pentru a elimina împachetarea. În loc să folosiți proprietatea revărsare pentru elementul părinte, setați o clasă suplimentară pentru acesta, de exemplu „clearfix” și utilizați următorul stil CSS:
Clearfix: după (conținut: "."; Vizibilitate: ascuns; afișare: bloc; înălțime: 0; clar: ambele;)
Utilizează o mică bucată de conținut care este ascunsă vederii, situată după elementul părinte, care îndepărtează ambalajul. Această metodă nu este completă, deoarece trebuie să fie costisitoare pentru a suporta browsere mai vechi.
Situații diferite necesită metode diferite de resetare a plutitorului. Să luăm ca exemplu o grilă cu diferite tipuri de blocuri.
Pentru o mai bună integrare vizuală a blocurilor similare, trebuie să începem o nouă linie atunci când culoarea se schimbă. Putem folosi metoda overflow sau light clear dacă fiecare grup de culori are un părinte. Sau utilizați metoda blocurilor goale între grupuri. Trei blocuri părinte care nu existau înainte sau trei blocuri goale care nu existau înainte. Depinde de tine să decizi care metodă este cea mai bună.
Probleme cu elementele plutitoare
Elementele plutitoare sunt adesea criticate pentru fragilitatea lor. O mare parte din această fragilitate provine de la IE6 și de la acesta bug-uri orientate spre plutire... Dar, pe măsură ce tot mai mulți dezvoltatori renunță la suportul pentru IE6, nu trebuie să vă gândiți la asta, dar pentru cei 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 reținut 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.
Utilizarea corectă a proprietății CSS float poate fi o sarcină descurajantă, chiar și pentru un designer de layout cu experiență. Acest articol conține opțiunile de utilizare a float-ului, precum și unele greșeli, cu exemple ilustrative.
Ce este plutitorul?
Unele elemente din CSS sunt la nivel de bloc și, prin urmare, încep pe o linie nouă. De exemplu, dacă plasați două paragrafe cu etichete P, atunci acestea vor fi amplasate unul sub celălalt. Alte elemente sunt „minuscule”, adică. afișat pe pagină pe o singură linie.O modalitate de a reatribui float elementelor este utilizarea proprietății float. Un exemplu clasic este folosirea float pentru a alinia o imagine la stânga sau la dreapta. Iată un cod HTML simplu pentru o imagine și un paragraf:
Lorem ipsum...
Sunt afișate pe o linie nouă:
Adăugați niște CSS la imagine:
img (float: dreapta; margine: 20px;)
Se obține alinierea la dreapta:
Dacă există mai mult text, atunci paragraful se va înfășura în jurul imaginii:
Să presupunem că vrem să indentăm 20 de pixeli între imagine și text. Această construcție nu va funcționa: p (marja: 20px;)
Corectează așa:
img (marja: 20px;)
De ce nu funcționează indentarea pentru un paragraf? Să adăugăm o chenar pentru a înțelege:
P (chenar: negru solid 1px;)
Rezultatul vă poate surprinde:
Se pare că imaginea este în interiorul unui paragraf! Prin urmare, proprietatea marjei nu funcționează în primul caz. Pentru a remedia acest lucru, puteți să flotați: stânga la un paragraf și să specificați o lățime absolută:
Reguli ciudate de plutire
Să trecem la cazuri de utilizare mai avansate pentru float: regulile care guvernează floats. Acest lucru este adesea necesar la codificarea unei galerii de imagini. De exemplu:
În mod implicit, fiecare element din listă va apărea pe o nouă linie. Dacă aplicăm float: left la fiecare, imaginile vor fi pe un rând cu o întrerupere de linie:
Li (float: stânga; margine: 4px;)
Dar dacă imaginile sunt de înălțimi diferite?
Dacă adăugăm o singură linie de afișare la elementele din listă, rezultatul este puțin mai frumos:
Li (afișare: inline;)
Acum să-l aliniem pe verticală:
Img (aliniere verticală: sus;)
Trebuie amintit că, în cazul unei înălțimi mai mari a imaginii, restul imaginilor curg doar în jurul celei anterioare, de exemplu:
Un exemplu de schimbare a ordinii articolelor - de exemplu, avem o listă de articole în ordine:
Dacă vrem să le rearanjam, folosim doar float: right în loc de float: left, și nu trebuie să schimbăm ordinea în HTML:
Este convenabil să folosiți floats pentru a grupa elemente de pe pagină, dar marea problemă este că elementele ulterioare (text sau bloc) primesc și proprietatea float. De exemplu, avem un bloc de imagini:
Textul de sub acesta începe să curgă în jurul întregului bloc:
Pentru a evita acest lucru, trebuie să utilizați proprietatea clear. Dacă o aplicăm la a doua imagine:
Ul li: al-n-lea copil (2) (clar: stânga;)
Primim asta:
În acest caz, restul imaginilor continuă să moștenească float: left. În consecință, textul va fi afișat stângaci:
Trebuie să aplicați clar: ambele la paragraful:
P (clar: ambele;)
Problema noastra este rezolvata:
Acum să presupunem că trebuie să setăm fundalul pentru galerie din exemplele anterioare. Dacă elementele nu plutesc, atunci rezultatul ar fi următorul:
Ul (fond: gri;)
Dar dacă plutim: lăsat la elementele listei, fundalul dispare cu totul:
Dacă setăm mai întâi înălțimea pentru UL:
Ul (înălțime: 300px;)
Nici asta nu rezolvă problema. dimensiunile fundalului sunt absolut specificate. Vom fi ajutați de clasa clearfix, care va fi aplicată div-ului la același nivel cu elementele UL.
Clearfix (clear: ambele;)
Există o altă soluție folosind overflow:
Ul (overflow: auto;)
Nouă reguli pentru flotoare:
- Elementele plutitoare nu se pot extinde dincolo de marginea containerului lor părinte.
- Fiecare element plutitor va fi afișat în dreapta sau sub cel anterior cu float: stânga, sau stânga și dedesubt, cu float: dreapta.
- Un bloc float: stânga nu poate fi mai la dreapta decât un bloc float: dreapta.
- Un element plutitor nu poate depăși partea de sus a containerului său.
- Un float nu poate fi poziționat mai sus decât blocul părinte sau float-ul anterior.
- Un element plutitor nu poate fi poziționat mai sus decât linia anterioară de elemente în linie
- Blocul plutitor trebuie amplasat cât mai sus posibil.
- Un element plutitor după celălalt nu poate depăși containerul său - se înfășoară la următoarea linie.
- Plutitorul: stânga ar trebui să fie cât mai în stânga posibil, iar plutitorul: dreapta trebuie să fie cât mai în dreapta posibil.
După ce am fost întrebat pentru a șaizeci și opta oară de ce blocul float este afișat incorect, am decis să scriu această postare, care să explice situațiile tipice pe care le întâlnește un layout designer începător, precum și pentru a trimite pur și simplu la acest articol data viitoare.
Disclaimer
Nu sunt un designer profesionist de layout, deși prin natura muncii mele a trebuit să proiectez mai mult de o duzină de site-uri. Am prieteni care învață să tasteze și vreau să-i ajut. Cel mai probabil le ai și tu. Scopul acestui articol nu este de a spune ceva nou, ci de a spune despre vechi din punctul de vedere al celor mai frecvente probleme întâlnite de designerii de layout începători. Nu pretind a fi adevărul absolut al cuvintelor mele și mă voi bucura doar dacă mă corectați și completați.Proprietăți flotante de reținut
dacă este setat la stânga sau la dreapta- Articol afișat ca blocat parca ar fi setat sa afiseze: bloc;
- Element se micsoreaza in latime la dimensiunile conținutului, cu excepția cazului în care elementul are un set explicit de lățime;
- Element bastoane la stânga (stânga) sau la dreapta (dreapta);
- Toate celelalte conținutul paginii va fi în cod HTML după element plutitor, se înfășoară în jurul lui;
Cazul de viață #1
Am două blocuri, plutesc: chiar la unul dintre blocuri, este aliniat la dreapta, dar tot rămâne sub primul. Un exemplu de cum arată.
Cauză
Dacă se întâmplă acest lucru, înseamnă că ați aplicat plutitorul nu pe primul, ci pe al doilea bloc. Datorită faptului că un element plutitor (cel cu un float) este înfășurat numai în jurul acelor elemente care intră î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ă (dovada) în cadrul părintelui. Elementul dvs. plutit pur și simplu nu se aliniază cu primele elemente de bloc cu lățime maximă, așa că este împins în jos.
Același fel toate conținutul site-ului care merge în cod HTML după elementele plutitoare curg în jurul lor, ceea ce are adesea efecte neașteptate.
Soluţie
Soluția #1. Setați în mod explicit înălțimea containerului. În cazurile în care se știe care ar trebui să fie dimensiunea 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 clarifică „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 proprietăți de depășire: automată (sau ascunsă) containerului. Forțează 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ă. Totuși, se întâmplă uneori, așa că aveți grijă.
UPD
Citește și ca o continuare a discuției despre proprietatea float.
În urmă cu câțiva ani, când dezvoltatorii au început să treacă la HTML fără tabele, proprietatea CSS float a preluat brusc un rol foarte important. Motivul pentru care float a devenit atât de comun a fost că, implicit, elementele bloc nu s-au aliniat unul lângă celălalt într-un format bazat pe coloane. Deoarece coloanele sunt necesare practic în fiecare schemă CSS, această proprietate s-a obișnuit și chiar a fost abuzată.
Proprietate float în CSS, permite unui dezvoltator 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 utilizarea poziționării absolute și relative - care ar fi neglijent și ar face aspectul dificil de întreținut.
În acest articol vă vom spune, ce este proprietatea plutiși modul în care afectează elementele în contexte specifice... De asemenea, vom evidenția unele dintre diferențele pe care le-ar putea avea această proprietate în browserele cele mai frecvent utilizate. În cele din urmă, vom demonstra câteva aplicații practice ale proprietății pluti... De asemenea, ar trebui să ofere 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 elementul bloc la stânga sau la dreapta, scoțându-l din fluxul de documente. Acest lucru permite conținutului care curge să se înfășoare în mod natural în jurul elementului plutitor. Acest concept este similar cu ceea ce vedeți în fiecare zi în tipărire, unde fotografiile și alte elemente grafice sunt aliniate pe fiecare parte și conținutul (de obicei text) curge natural în jurul elementului aliniat în jurul marginii din stânga sau din dreapta.
În imaginea de mai sus, secțiunea „Cititori de site” a revistei .net, cu 3 fotografii ale cititorilor aliniate la stânga î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ă o modalitate care este utilizată în designul tabelar.
Eficacitatea utilizării floaturilor în aspectul 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 unui aspect fără foi de calcul, folosind vechiul site al Microsoft ca referință. Float a fost folosit în mod evident în reproiectarea sa simulată a marcajului Microsoft.
Sintaxă
Proprietatea Float poate lua una dintre cele 4 valori: stânga (stânga), dreapta (dreapta), fără aliniere (niciunul) și moștenit (moștenire). Acest lucru este declarat așa cum se arată în codul de mai jos:
#sidebar (float: stânga;)
#sidebar ( plutește la stânga; |
Cele mai frecvent utilizate valori sunt stânga și dreapta. Valoarea nici unul sau valoarea inițială float pentru orice element din pagina HTML este 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 unui element float, cu toate acestea, pentru a funcționa corect, float va funcționa mai eficient în anumite circumstanțe.
În general, un element plutitor ar trebui să aibă lățimea stabilită în mod explicit(cu excepția cazului în care este un element înlocuit, cum ar fi o imagine). Acest lucru asigură că float-ul se comportă conform așteptărilor și ajută la evitarea problemelor în unele browsere.
#sidebar (float: stânga; lățime: 350px;)
#sidebar ( plutește la stânga; lățime: 350px; |
Caracteristicile elementelor plutitoare
Mai jos este o listă a comportamentului elementelor plutitoare, conform specificației CSS2:
Caseta flotantă din stânga va fi decalată la stânga față de marginea sa din stânga (sau marginea marginii dacă nu există margine) atingând fie marginea conținutului casetei, fie marginea altei casete plutitoare.
Dacă dimensiunea blocului 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 exemplu. este în afara fluxului de documente
Marginile unui bloc plutit nu se vor alinia cu marginile blocurilor adiacente
Elementul rădăcină ( ) nu poate fi flotat
Un element inline care este flotat este convertit într-un element bloc
Plutește în practică
Cel mai frecvent utilizat caz de utilizare pentru proprietatea float este o imagine plutitoare 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. Alte 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 am menționat mai devreme, elementele flotante sunt eliminate din fluxul documentului, iar alte elemente bloc rămân în flux, acționând ca și cum elementul flotant 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
un element la nivel de bloc, deci ignoră un element plutit care se întinde pe lățimea containerului (minus umplutura). Toate elementele neflotate de tip bloc se vor comporta similar.
Textul dintr-un paragraf este inline, astfel încât se înfășoară în jurul elementului flotant. Blocul flotant primește, de asemenea, parametrii de marjă pentru a-l deplasa față de paragraful, făcându-l clar din punct de vedere vizual, astfel încât elementul de paragraf să ignore blocul flotant.
Curățarea plutitoarelor
Problemele de poziționare cu float sunt de obicei rezolvate prin utilizarea proprietății clear CSS, care vă permite să „ștergeți” elementele plutitoare din stânga sau dreapta, sau de ambele părți.
Să aruncăm o privire la un exemplu obișnuit - un subsol se înfășoară în partea dreaptă a marcajului a 2 clone:
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 subsolul alunecând din loc. Acest lucru este cauzat de aplicarea floaturilor coloanelor. Acesta este comportamentul corect, deși este mai problematic. Pentru a rezolva această problemă, folosim proprietatea clear menționată 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 doar elementele plutitoare. Utilizarea clear este că ambele coloane nu vor omite subsolul deoarece nu este un element flotant.
Prin urmare, utilizați elemente clare pe care nu sunt flotante și, uneori, chiar elemente flotante, pentru a face ca elementele paginii să le ia locul.
Închiderea părintelui
Una dintre cele mai comune caracteristici ale markupului flotant este „abandonul” părintelui. 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.
Rețineți că partea de jos a imaginii plutitoare apare în afara ei părinte. Părinte nu este complet extins pentru a conține imaginea plutitoare. Acest lucru se datorează a 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 în conformitate cu specificațiile CSS. Toate browserele fac același lucru în acest exemplu. Trebuie să spun că, în acest exemplu, adăugarea lățimii containerului poate preveni problema în IE, dar problema trebuie rezolvată ș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.
Acum containerul se extinde pentru a găzdui toți copiii săi. Din păcate, această remediere va funcționa doar într-un număr limitat de cazuri, deoarece un părinte plutitor poate avea efecte nedorite asupra aspectului dvs.
Soluția 2: Adăugarea de markup suplimentar
Aceasta este o metodă depreciată, dar o opțiune mai simplă. Doar adăugați un element suplimentar în partea de jos a recipientului și „ștergeți-l”. Iată cum va arăta HTML-ul 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 (clear: ambele;)
Clearfix ( clar: ambele; |
Puteți face acest lucru și cu
etichetă cu stil activ. În orice caz, obțineți rezultatul dorit: containerul părinte se va extinde pentru a include toți copiii săi. Cu toate acestea, 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ă tehnică a fost folosită pe scară largă pentru a rezolva problemele de curățare a plutitoarelor. Iată cum arată CSS-ul:
Clearfix: după (conținut: "."; Afișaj: 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 plutitori și nu se extinde pentru a le include.
Dar această metodă nu funcționează pentru Internet Explorer înainte de versiunea 7, așa că pentru IE trebuie să aplicaț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 problema î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: după pseudo-elementul nu funcționează în IE6 / 7, obținem un cod puțin umflat și complicat și este necesar un stil suplimentar care nu este valabil doar pentru IE, așa că această soluție nu este cea mai bună modalitate, dar probabil că cel mai bun pe care l-am considerat.î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ă markup inutil.
Rețineț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 lățime, puteți adăuga un stil numai 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 considerată 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 unui element să aibă bare de defilare sau să ascundă conținutul. Dacă există elemente cu margini negative sau poziționare absolută în părinte, atunci acestea vor fi ascunse dacă ies în afara limitelor părintelui, așa că această metodă trebuie utilizată cu prudență. 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.
Așa că nu este chiar ușor să răsfoiești problema. Dar aproape orice problemă de curățare a plutitoarelor poate fi rezolvată prin una dintre metodele de mai sus.
Flotează erori legate în Internet Explorer
De-a lungul anilor, au existat numeroase articole postate pe web care discută despre erorile comune 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 cu JavaScript
Pentru a modifica valoarea CSS în JavaScript, trebuie să accesați stilul obiectului prin conversia proprietății CSS intenționate în „cazul Camel”. De exemplu, proprietatea CSS „margin-left” devine marginLeft, proprietatea background-color devine BackgroundColor și așadar pe. Dar cu proprietatea float, este 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 varietate 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 cum să plutească o imagine cu un titlu, permițând textului să se înfășoare în mod natural în jurul ei.
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 cum să creezi un Meniu de 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 de a pluti: a lăsat o serie de fotografii conținute într-o listă neordonată, care obține același rezultat pe care l-ați putea vedea într-un aspect de tabel.
Pagina de produse Foremost Canada (vezi imaginea de mai sus) își afișează produsele într-un format de grilă lângă bara laterală. Fotografiile sunt afișate ca o listă neordonată cu proprietatea float, pentru toți
Pagina futoane a lui Paragon Furniture (vezi imaginea de mai sus) are 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 și o grilă de fotografii structurate, aici fotografiile conțin un float: stânga
Aliniere câmpuri cu buton
Modelarea elementelor implicite de formular 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 articolul de lângă butonul de trimitere.
Î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 proprietatea clear: ambele a „footer” pentru a „șterge” ambalarea în jurul ambelor coloane.
#footer (clar: ambele;)
Proprietate clar are patru sensuri. Ambii folosit pentru a reseta wrap în ambele direcții. Stângași Dreapta sunt folosite pentru a reseta o direcție - stânga sau, respectiv, dreapta. Nici unul este implicit. Moşteni poate fi a 5-a valoare, dar surprinzător nu este acceptată Internet Explorer... Resetarea doar a fluxului din stânga sau din dreapta este destul de rară, dar are beneficii practice.
Mare colaps
Un lucru de-a face pluti surprinzător este efectul acestei proprietăți asupra elementelor părinte. Dacă elementul părinte nu conține alte elemente decât un float, atunci înălțimea lui se prăbușește literalmente. Acest lucru nu este întotdeauna vizibil, mai ales dacă părintele nu are un trecut vizibil, dar este important să țineți cont de acest lucru.
Dar alternativa la un astfel de colaps este și mai rea. Luați în considerare următorul scenariu:
Dacă caseta de sus se extinde automat pentru a găzdui elementul plutitor, atunci obținem o întrerupere a fluxului de text între paragrafe, fără posibilitatea de a-l elimina. Dacă ar fi așa, atunci dezvoltatorii s-ar plânge mult mai des de acest comportament al blocurilor plutitoare decât de colapsul acum.
Colapsul trebuie reținut întotdeauna pentru a preveni comportamentul ciudat de aspect și problemele între browsere. Putem rezolva această problemă folosind clar după elementul plutitor din container, dar înainte ca containerul să fie închis.
Tehnici de anulare a împachetarii
Dacă te afli într-o situație în care știi unde va fi următorul element, poți folosi clear: ambele și mergi la treaba ta. Acest lucru este ideal, deoarece nu necesită hack-uri sau elemente suplimentare. Dar, din păcate, de obicei nu totul merge așa cum ne dorim și, în acest caz, puteți folosi următoarele instrumente.
Metoda blocului gol.
Este literalmente un bloc gol.
... Uneori poți găsi elementul
sau orice alt element aleatoriu, dar div este cel mai comun, deoarece nu are un stil implicit în browsere, nu are nicio funcție specială și este puțin probabil să fie în stilul CSS general. Această metodă este respinsă de puriștii semantici deoarece prezența ei nu are nicio semnificație contextuală pe pagină și este acolo doar pentru apariție. Desigur, în sens strict, au dreptate, dar el își face treaba și nu face rău nimănui.
Metoda overflow.
Bazat pe specificarea unei proprietăți CSS revărsare pentru elementul părinte. Dacă această proprietate este setată la auto sau ascuns pentru elementul părinte, apoi se va extinde după elementul plutit, curățând efectiv plutitorul din jurul lui pentru elementele ulterioare. Această metodă poate fi frumoasă din punct de vedere semantic, deoarece nu necesită elemente suplimentare. Cu toate acestea, după cum puteți vedea, am adăugat un nou div pentru a utiliza această metodă, care este echivalentă cu utilizarea unui bloc nesemantic gol și este mai puțin flexibilă. De asemenea, trebuie amintit că proprietatea revărsare nu are scopul de a dezactiva împachetarea. Aveți grijă să nu ascundeți accidental conținutul sau să nu provocați bare de defilare nedorite.
Metodă ușoară de curățare.
Utilizează un pseudo-selector CSS (: după) pentru a elimina împachetarea. În loc să folosiți proprietatea revărsare pentru elementul părinte, setați o clasă suplimentară pentru acesta, de exemplu „clearfix” și utilizați următorul stil CSS:
Clearfix: după (conținut: "."; Vizibilitate: ascuns; afișare: bloc; înălțime: 0; clar: ambele;)
Utilizează o mică bucată de conținut care este ascunsă vederii, situată după elementul părinte, care îndepărtează ambalajul. Această metodă nu este completă, deoarece trebuie să fie costisitoare pentru a suporta browsere mai vechi.
Situații diferite necesită metode diferite de resetare a plutitorului. Să luăm ca exemplu o grilă cu diferite tipuri de blocuri.
Pentru o mai bună integrare vizuală a blocurilor similare, trebuie să începem o nouă linie atunci când culoarea se schimbă. Putem folosi metoda overflow sau light clear dacă fiecare grup de culori are un părinte. Sau utilizați metoda blocurilor goale între grupuri. Trei blocuri părinte care nu existau înainte sau trei blocuri goale care nu existau înainte. Depinde de tine să decizi care metodă este cea mai bună.
Probleme cu elementele plutitoare
Elementele plutitoare sunt adesea criticate pentru fragilitatea lor. O mare parte din această fragilitate provine de la IE6 și de la acesta bug-uri orientate spre plutire... Dar, pe măsură ce tot mai mulți dezvoltatori renunță la suportul pentru IE6, nu trebuie să vă gândiți la asta, dar pentru cei 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 reținut 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.
