Float mania: o explicație a modului în care funcționează proprietatea float CSS. Clasa generică clearfix. Pentru ce se folosește plutitorul?
Folosire adecvata CSS proprietățile plutitoare poate fi nu este o sarcină ușoară chiar și pentru un designer de layout cu experiență. Acest articol conține exemple de utilizare a float-ului, precum și unele erori, cu exemple ilustrative.
Ce este plutitorul?
Unele elemente din CSS sunt la nivel de bloc și, prin urmare, încep cu linie nouă. De exemplu, dacă plasați două paragrafe cu etichete P, acestea vor fi unul sub celălalt. Alte elemente sunt „minuscule”, adică sunt afișate pe pagină pe o singură linie.O modalitate de a reatribui un tip de 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ă codul HTML simplu pentru imagine și paragraf:
Lorem ipsum...
Ele sunt afișate pe o nouă linie:
Adăugați puțin imagine CSS:
img ( float: dreapta; margine: 20px; )
Aceasta are ca rezultat alinierea la dreapta:
Dacă există mai mult text, paragraful se va înfășura în jurul imaginii:
Să presupunem că trebuie să indentăm 20 de pixeli între imagine și text. Această construcție nu va funcționa: p (marja: 20px;)
Corect asa:
img (marja: 20px;)
De ce nu funcționează indentarea paragrafelor? Pentru a înțelege, să adăugăm un cadru:
P (chenar: negru solid 1px; )
Rezultatul vă poate surprinde:
Se pare că poza este în interiorul paragrafului! De aceea nu merge proprietatea marjei In primul caz. Pentru a remedia acest lucru, puteți aplica float:left la paragraf și puteți specifica o lățime absolută:
Reguli ciudate de plutire
Să trecem la mai multe opțiuni complexe utilizarea float: la regulile care reglementează obiectele plutitoare. Acest lucru poate fi necesar atunci când amenajați o galerie de imagini. De exemplu:
În mod implicit, fiecare element din listă va apărea pe o nouă linie. Dacă aplicați float:left fiecăruia, imaginile se vor alinia cu o întrerupere de linie:
Li (float: stânga; margine: 4px; )
Dar dacă imaginile sunt de înălțimi diferite?
Dacă adăugăm un afișaj pe o singură linie elementelor din listă, va arăta puțin mai frumos:
Li (afisare: inline; )
Acum să aliniem vertical:
Imag ( alinierea verticală: sus; )
Trebuie amintit că, în cazul unei înălțimi mai mari a imaginilor, imaginile rămase se înfășoară doar în jurul celei anterioare, de exemplu:
Un exemplu de schimbare a ordinii elementelor - de exemplu, avem o listă de elemente în ordine:
Dacă vrem să le punem în ordine inversă, folosim doar float:right în loc de float:left și nu trebuie să schimbăm ordinea în HTML:
Folosirea float este convenabilă pentru gruparea elementelor pe o 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ă se înfășoare în jurul întregului bloc:
Pentru a evita acest lucru, trebuie să utilizați proprietatea clear. Dacă îl aplicăm la a doua imagine:
Ul li:nth-child(2) ( clar: stânga; )
Primim asta:
În acest caz, imaginile rămase continuă să moștenească float:left. În consecință, textul va fi afișat stângaci:
Trebuie să aplicați clear:both 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 ar pluti, ar arăta astfel:
Ul ( fundal: gri; )
Dar dacă aplicați float:left elementelor listei, fundalul dispare complet:
Dacă setăm mai întâi înălțimea la UL:
Ul ( înălțime: 300px; )
Nici asta nu rezolvă problema, deoarece... Dimensiunile fundalului sunt setate absolut. Ne va ajuta clasa clearfix, care va fi aplicată div-ului la același nivel cu elementele UL.
Clearfix ( clar: ambele; )
Există o altă soluție folosind overflow:
Ul ( overflow: auto; )
Nouă reguli pentru elementele plutitoare:
- Elementele plutitoare nu se pot extinde dincolo de marginea containerului lor părinte.
- Fiecare element plutitor va apărea la dreapta sau dedesubtul celui anterior cu float:left, sau la stânga și dedesubtul celui anterior cu float:right.
- Un bloc cu float:left nu poate fi mai la dreapta decât un bloc cu float:right.
- Un element plutitor nu se poate extinde dincolo de marginea superioară a containerului său.
- Un element plutitor nu poate fi poziționat mai sus decât blocul său părinte sau decât elementul plutitor anterior.
- Un element plutitor nu poate fi poziționat mai sus decât linia anterioară de elemente în linie
- Blocul plutitor trebuie poziționat cât mai sus posibil.
- Un element plutitor după altul nu poate depăși containerul său - se înfășoară la următoarea linie.
- Un bloc cu float:left ar trebui să fie poziționat cât mai mult la stânga posibil, iar un bloc cu float:right trebuie poziționat cât mai mult la dreapta.
Cu câțiva ani în urmă, 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 folosirea poziționării absolute și relative - 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. Aceasta 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; )
#sidebar ( 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; )
#sidebar ( plutește la stânga; latime: 350px; |
Caracteristicile elementelor plutitoare
Mai jos 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 flotant, 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.
Curatare plutitoare
Problemele de amenajare cu flotoare sunt de obicei rezolvate prin folosire Proprietăți CSS clar, care vă permite să „eliminați” elementele plutitoare din stânga sau din dreapta sau din ambele părți.
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ă coboare, 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 lor desemnate.
Remedierea abandonului părinților
Una dintre cele mai comune caracteristici ale marcajului 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 imaginea 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 depășirii
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-urile î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 plutirea 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 futons 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 plutitoare
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 elimină „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.
Să vedem ce se întâmplă cu elementele când li se aplică proprietatea float:
- Elementul „plutește” și este apăsat pe marginea din stânga (dacă float: stânga) sau dreapta (float: dreapta) a elementului părinte sau a elementului care este, de asemenea, setat să plutească
- Dacă un element nu se poate potrivi într-un rând cu un alt element din cauza lățimii blocului părinte, acesta va fi mutat în jos până când există suficient spațiu pentru el.
- Alte elemente bloc pentru care nu este specificat float se comportă ca și cum elementul cu float nu se află pe pagină (elementul a float). Liniile „știu” că elementul a plutit și se înfășoară în jurul lui
- Lățimea unui bloc setat să plutească este determinată de conținut.
Să ne uităm la un exemplu. Decomentați proprietatea float: lăsată în interiorul CSS. Uită-te la rezultat.
Înlocuiți float:left cu float:right.
Proprietatea float este utilă pentru a permite textului să se încadreze în jurul imaginilor. Luați în considerare un exemplu:
Adăugați un comentariu la proprietatea float: left în fișierul CSS. Vedeți cum se va schimba aspectul paginii. Înlocuiți float: stânga cu float:right.
„Restrângerea” elementului părinte când apar „copii”.
Elementul doi să fie plasat în interiorul elementului unu. În mod implicit, înălțimea unu se va întinde pe tot conținutul. De îndată ce aplicăm proprietatea float celor două elemente, acesta plutește, iar elementul părinte one nu va ști că există două. Dacă doi nu are conținut, atunci înălțimea sa este zero. Acest comportament se numește „colaps”. Pentru a preveni colapsul părintelui, fie îi este dată proprietatea min-height - înălțimea minimă, fie se folosește o metodă: se adaugă un alt bloc, pentru care este setată proprietatea:
| 1 |
Acest bloc nu este vizibil pe pagină, dar proprietatea clear:both elimină împachetarea elementelor și întinde părintele la înălțimea conținutului.
Decomentați proprietatea float:left în CSS. Uită-te cum se comportă elementul părinte:
Luați în considerare un exemplu folosind clar: ambele
Așa că v-ați familiarizat cu proprietățile de bază ale float. Să ne punem în practică cunoștințele.
A executa
Exercitiul 1. Adăugați cursuri la imagini. În clase, specificați proprietatea float:left. Studiați cum se va schimba rezultatul paginii.
Toate elementele care apar pe o pagină HTML nu sunt altceva decât dreptunghiuri. Și practic doar două tipuri:
- bloc (bloc), care ocupă toată lățimea unde se află și sunt separate de ceea ce este deasupra și dedesubtul lor. De exemplu, acestea sunt etichete DIV, P, H.
- încorporat (inline). De exemplu, SPAN, STRONG, EM, A și IMG.
Mese.
Rolul proprietății a crescut după trecerea de la aspectul tabelului la aspectul div. Acest lucru se datorează faptului că float permite unui dezvoltator web să includă coloane fără a fi nevoie să recurgă la un tabel. Poate lua valori dreapta, stânga, dar nu centru.
Anterior, aspectul paginii se făcea folosind Mese.
Rolul proprietății float a crescut după trecerea de la aspectul tabelului la aspectul div. Acest lucru se datorează faptului că float permite unui dezvoltator web să includă coloane fără a fi nevoie să recurgă la un tabel. Poate lua valori dreapta, stânga, dar nu centru.
Utilizarea afișajului: proprietatea bloc; sau afișare: inline; convertim un tip de dreptunghi în altul. De exemplu, o listă UL care are un număr de blocuri LI poate fi așezată pe orizontală:
- PARAGRAF
- PARAGRAF
- PARAGRAF
- PARAGRAF
- PARAGRAF
- PARAGRAF
Când utilizați proprietatea float, dreptunghiul este un dreptunghi bloc, dar cu o trăsătură caracteristică: lățimea sa nu se va extinde la întregul conținut. De exemplu, un antet h3 arată astfel:
acesta este HEADER h3
Dacă setăm afișarea proprietăților: inline;, vom vedea că nu doar lățimea s-a modificat, ci și distanța deasupra și sub element:acesta este HEADER h3
Dar dacă vreau să plasez elementul în dreapta și să adaug text-align:right de data aceasta, atunci obținem:acesta este HEADER h3
Și este complet diferit dacă float: corect;. Vă rugăm să rețineți că distanța deasupra și dedesubtul elementului rămâne neschimbată:acesta este HEADER h3
Cum se vor comporta elementele de lângă titlu?Textul de sus rămâne neschimbat deoarece un element flotant nu poate fi poziționat deasupra liniei pe care este creat.
acesta este HEADER h3
Dar textul roșu este situat sub titlu și se va înfășura în jurul lui fără a avea stiluri suplimentare. Și doar înălțimea lui h3 va fi depășită, pagina va reveni la ordinea naturală.
A B C D Mai multe elemente plutitoare vor urma succesiunea locației lor. ABÎNG text...
Și alinierea se face de-a lungul marginii de jos a acelor litere care sunt pe aceeași parte.
A B C D Dacă mergem astfel încât curgerea în jurul elementului să se oprească dintr-un anumit moment (de aici), se aplică proprietatea clear. Îl putem adăuga la o etichetă goală
Pentru a așeza uniform mai multe dreptunghiuri bloc, le dăm aceeași lățime.
Aspectul tabelar este foarte convenabil și de înțeles, motiv pentru care a apărut, probabil, afișajul său analog: tabel; Aceeași formă se obține cu mai puțin cod.
Acum puteți vedea cum este construită galeria de imagini. Sper că nimeni nu a uitat.
text...
text...
Link-uri către surse:
