Float and clear - proprietăți CSS pentru elementele plutitoare în aspectul bloc. Conceptul de flux. Caracteristicile plutitorului

Float este proprietate CSS pentru poziţionarea elementelor. Pentru a înțelege scopul și originea acestuia, vă puteți referi la design de imprimare. Într-un aspect tipărit, imaginile pot fi poziționate pe pagină astfel încât textul să „curgă” în jurul lor. Acest lucru se numește de obicei „încheierea textului”.

În programele de aspect de pagină, elementele cu text pot lua în considerare imaginile, precum și le pot ignora. Dacă sunt ignorate, textul va apărea deasupra imaginilor ca și cum nu ar fi acolo. Aceasta este diferența principală între dacă imaginile fac sau nu parte din fluxul principal al paginii. Designul web este foarte asemănător.

În designul web, elementele de pagină cu setarea proprietății float se comportă exact ca imaginile tipărite atunci când textul „curge” în jurul lor. Astfel de elemente fac parte din fluxul principal al paginii web. Cu toate acestea, lucrurile stau diferit dacă elementele folosesc poziționarea absolută. Elementele poziționate absolut sunt eliminate din fluxul principal al paginii, similar cu exemplul de mai sus, în care textul ignoră imaginile la imprimare. Astfel de elemente nu afectează poziția altor elemente, indiferent dacă se ating sau nu.

Setarea proprietății float funcționează astfel:

#sidebar (float: dreapta; )

Există un total de 4 valori pentru proprietatea float. Stânga și dreapta sunt folosite pentru direcțiile corespunzătoare. None (implicit) - asigură că elementul nu va pluti. Și moștenire , care spune că comportamentul ar trebui să fie același cu elementul părinte.

Pentru ce poate fi folosit plutitorul?

Pe lângă împachetarea textului în jurul imaginilor, float poate fi folosit pentru a crea aspectul unui întreg site.

Proprietatea float este utilă și la o scară mai mică. De exemplu, luați în considerare o zonă mică pe pagina unui site web. Să presupunem că utilizați float pentru avatarul dvs., când modificați dimensiunea imaginii, dimensiunea textului va fi ajustată pentru a se potrivi imaginii.

Aceeași aranjare a obiectelor poate fi realizată prin utilizarea poziționării. Obiectului container i se atribuie o poziționare relativă, iar obiectului imagine îi este atribuită o poziționare absolută. În acest caz, avatarul nu va afecta poziția textului.

Dezactivarea proprietății float

Pentru float, proprietatea aferentă este clară. Orice element care are setată proprietatea clear nu va fi plutit în partea de sus așa cum era de așteptat, ci va apărea sub elementele flotante. Poate că un exemplu dintr-o imagine va explica mai bine decât cuvintele.

În exemplu, bara laterală este plutitoare la dreapta (float: right;), iar înălțimea sa este mai mică decât zona principală de conținut. Prin urmare, subsolul va fi ridicat mai sus pentru că are suficientă înălțime și comportamentul de plutire o cere. Pentru a remedia situația, trebuie să setați proprietatea clear, care asigură că elementul este afișat sub elementele float.

#footer ( clar: ambele; )

Proprietatea clear poate avea patru valori. Ambele, cele mai frecvent utilizate, sunt folosite pentru a anula plutirea fiecărei direcții. Stânga și Dreapta - utilizate pentru a anula flotarea uneia dintre direcții. None - implicit, de obicei nu este utilizat decât dacă este nevoie de clear. moștenirea ar fi a cincea valoare, dar în mod ciudat nu este susținută în Internet Explorer. Anularea doar a unui float la stânga sau la dreapta este mult mai puțin obișnuită, dar cu siguranță are scopurile sale.

Marele Colaps

Un alt lucru uimitor despre proprietatea float este că utilizarea sa poate afecta elementul părinte. Dacă un astfel de element conține doar elemente flotante, atunci se prăbușește literalmente, adică înălțimea sa este zero. Acest lucru nu este întotdeauna vizibil decât dacă elementul părinte are un fel de set de fundal vizibil.

Acest colaps pare ilogic, dar alternativa este și mai rea. Luați în considerare acest exemplu:

Dacă elementul bloc din partea de sus se extinde automat pentru a găzdui toate elementele float, vom ajunge cu un decalaj nenatural în text între paragrafe, fără nicio modalitate de a-l remedia. Dacă ar fi așa, designerii noștri s-ar plânge mult mai des de acest comportament decât de prăbușire.

Astfel, prăbușirea este aproape întotdeauna necesară pentru a preveni dificultățile de aspect. Pentru a schimba acest comportament, trebuie să adăugați un element de anulare a float după elementele float, dar înainte de a închide elementul părinte.

Modalități de a anula flotarea

Dacă știți că după elementele float, un alt element (de exemplu, un subsol) va fi întotdeauna afișat, atunci trebuie doar să setați proprietatea clară: ambele; , ca în exemplul de mai sus și continuați să vă faceți propriile lucruri. Acest lucru este ideal pentru că nu necesită niciun hack sau elemente suplimentare. Desigur, nu totul în viața noastră este atât de lin și există momente când această metodă nu este suficientă. Prin urmare, este necesar să aveți mai multe modalități suplimentareîn arsenalul tău.

• Metoda div gol. Este folosit un div literalmente gol.
  . Uneori un element poate fi folosit în locul lui
  sau altul, dar div este folosit cel mai des pentru că implicit nu are stil, nu motiv specialși este puțin probabil să i se aplice stilul general prin CSS. Fanilor markupului pur semantic nu le place această metodă, deoarece prezența unui div gol nu are semnificație contextuală și este plasată pe pagină numai din motive de design. Desigur, strict vorbind, au dreptate, dar el își face treaba și nu face rău nimănui.
• Metoda overflow. Pe baza faptului că elementul părinte trebuie să seteze proprietatea overflow. Dacă această proprietate este setată la automat sau ascuns , elementul părinte se va extinde pentru a găzdui toate elementele float. Această metodă pare mai corectă din punct de vedere semantic, deoarece nu necesită elemente suplimentare. Cu toate acestea, dacă ar fi să utilizați un alt div doar pentru a utiliza această abordare (adică div-ul părinte), atunci ar fi același ca exemplul anterior de adăugare a unui div gol. De asemenea, rețineți că proprietatea overflow are un scop diferit. Fiți atenți și nu permiteți ca o parte din conținutul dvs. să dispară sau să apară bare de defilare inutile.
• Metodă simplă de curățare. Această metodă folosește un pseudo minunat Selector CSS- :după. Mult mai bine decât utilizarea overflow pe elementul părinte. Doar i-ai pus-o clasa suplimentara, declarat astfel: .clearfix:after (conținut: "."; vizibilitate: ascuns; afișare: bloc; înălțime: 0; clear: ambele; ) Această metodă adaugă conținut invizibil și anulează float. Și apropo, aceasta nu este toată povestea despre cum cod suplimentar ar trebui să fie folosit în browsere mai vechi.

Și, după cum înțelegeți, fiecare dintre metode este folosită în situatii diferite. Să luăm, de exemplu, o grilă de elemente bloc de diferite tipuri.

Pentru mai bine reprezentare vizuala Ar fi bine să combinați blocuri similare. De exemplu, dorim ca fiecare tip să înceapă linie nouă, în cazul nostru, tipul elementului este determinat de culoare. Putem folosi metoda overflow sau „metoda simplă de curățare” dacă fiecare grup are propriul său element container. Sau putem folosi metoda div gol între fiecare dintre grupuri. Trei elemente container sau trei div-uri goale, ceea ce este mai bun pentru sarcina dvs. depinde de dvs.

Probleme cu plutitoarele

Oamenii încearcă adesea să ocolească Float-urile pentru că trebuie să fie lucrate cu foarte atent. Majoritatea erorilor au venit cu IE6. Pe măsură ce tot mai mulți designeri web nu mai acceptă IE6, este posibil să nu fiți îngrijorat de aceste probleme. Dar pentru cei cărora le pasă, iată o listă scurtă.

Alternative la plutire

Dacă aveți nevoie de text pentru a încheia o imagine, nu există alternative. Dar pentru aspectul paginii, cu siguranță există opțiuni. Există câteva abordări foarte interesante care combină flexibilitatea float-ului cu puterea poziționare absolută. CSS3 are ceva numit Modul de aspect al șablonului, care în viitor va oferi o alternativă demnă pluti

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 de bloc pentru care nu este specificată valoarea float se comportă ca și cum elementul cu float nu se află pe pagină (elementul are „floated”). 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:

Adaugă un comentariu la șir CSS fișier la float: proprietate stângă. Vedeți cum se va schimba aspectul paginii. Înlocuiți float: stânga cu float: dreapta.

„Restrângerea” elementului părinte atunci 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. Uitați 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.

Formatarea tabelelor în cascadă). Această limbă există din 1996 și încă evoluează. Pe acest moment dezvoltatorii folosesc deja a treia versiune de CSS. Folosind limba Programare CSS Este posibil să creați un site complet frumos și plăcut, care să nu pară depășit sau incomod pentru utilizator, chiar dacă nu utilizați JavaScript deloc. Caracteristici moderne a treia versiune vă permite să faceți acest lucru.

Dezvoltatorii pot folosi și mai mult opțiuni convenabile formatare, cum ar fi Flexbox sau Poziție pentru a schimba locația unui element pe site, dar mai întâi de toate. În primul rând, ar trebui să înțelegeți avantajele și dezavantajele proprietății Float.

CSS Float - de ce este necesar?

Float este o proprietate pentru poziționarea elementelor. În fiecare zi poate fi văzut pe paginile ziarelor și revistelor, privind imaginile și textul care curge foarte frumos în jurul lor. În lumea codului HTML și CSS, același lucru ar trebui să se întâmple atunci când utilizați funcția Float. Dar merită să ne amintim că editarea imaginilor nu este întotdeauna scopul principal al acestei funcții. Poate fi folosit pentru a crea un aranjament popular de elemente de site în două, trei, patru coloane. De fapt, proprietatea Float CSS se aplică aproape oricărui element html. Cunoscând elementele de bază ale editării aranjamentului elementelor folosind funcția Float și apoi Property, crearea oricărui design de site web nu va fi dificilă.

Programele speciale ale designerilor de layout nu pot observa uneori imagini, ci merg deasupra lor. Lucruri destul de asemănătoare se întâmplă în web design, ținând cont doar de faptul că textul, în loc să urce pe imagine, este afișat (dacă proprietatea Float este folosită incorect) lângă el sau dedesubt, dar întotdeauna nu acolo unde are nevoie dezvoltatorul.

Descrierea proprietății CSS Float

De fapt, a ști cum să folosești proprietatea Float este un as foarte bun în mânecă pentru orice designer web. Dar, din păcate, lipsa de înțelegere a modului în care funcționează această funcție poate duce la coliziuni ale elementelor site-ului și alte frustrări acest tip de. Anterior, de asemenea situatii similare a apărut din cauza erorilor din browsere. Acum va fi dezvăluit secretul modului de utilizare corectă a proprietății Float și nu ar trebui să mai apară probleme cu aceasta.

Proprietatea Float are patru valori:

• Float: moștenire;
• Float: dreapta;
• plutește la stânga;
• Plutitor: niciunul;

Pentru cei care cunosc limba engleză, valorile parametrilor proprietății Float ar trebui să fie clare. Dar pentru cei care nu știu, iată o mică explicație. Parametru :stânga; Mută ​​corpul elementului în colțul din stânga extrem al elementului părinte. Același lucru se întâmplă (doar în cealaltă direcție) cu parametrul bcgjkmpjdfybb :dreapta;. Sens :moşteni;îi spune elementului să preia aceleași setări ca și părintele său. Astfel de elemente sunt numite și elemente copil, deoarece sunt situate direct în interiorul părinte în codul html. O proprietate :nici unul; permite elementului să nu perturbe fluxul normal al documentului, acesta este setat implicit pentru toate părțile codului.

Cum funcționează Float?

Proprietatea Float CSS funcționează destul de simplu. Tot ceea ce a fost descris mai sus se poate face fără prea multe dificultăți. Atunci totul va fi la fel de simplu. Dar înainte de a continua să studiem proprietatea Float, merită să înțelegem puțină teorie. Fiecare element al unui site web este un bloc. Puteți verifica cu ușurință acest lucru deschizând consola în interior Google Chrome prin apăsarea Ctrl + Shift + J. Textul, titlul, imaginea, linkurile și toate celelalte componente ale site-ului vor fi afișate în blocuri, doar marimi diferite. Inițial, toate aceste blocuri vin unul după altul. După cum puteți vedea în exemplul de mai jos, liniile de cod se succed, astfel încât acestea vor fi afișate strict una după alta.

Aceasta se numește flux normal. Cu acest flux, toate blocurile se află unul peste altul (fără a intersecta corpurile elementelor) vertical. Inițial, tot conținutul unei pagini web este localizat în acest fel. Dar atunci când utilizați, de exemplu, proprietăți Limbajul CSS Float Left, elementul își părăsește poziția naturală pe pagină și este plutit la extrema stângă. Acest comportament duce inevitabil la o coliziune cu acele elemente care rămân în fluxul normal.

Cu alte cuvinte, elementele, în loc să fie dispuse vertical, sunt acum unul lângă celălalt. Dacă elementul părinte are suficient spațiu astfel încât să poată găzdui doi copii în interiorul său, atunci nu are loc o coliziune, dar dacă nu, atunci suprapunerea unui obiect cu altul este inevitabilă. Acest lucru este extrem de important de reținut pentru a înțelege cum funcționează proprietatea CSS Float.

Funcție clară pentru a rezolva probleme

Funcția Float are un prieten drag - Clear. Împreună - Ambele funcții se completează reciproc și îl fac pe dezvoltator fericit. După cum sa menționat mai sus, elementele adiacente ies din fluxul lor normal și încep să „plutească”, la fel ca un element care are aplicată proprietatea Float (de exemplu, CSS Float Top). Drept urmare, în loc de un element plutitor, obțineți două, și deloc în locul în care dezvoltatorul a intenționat să le plaseze. Din acest moment încep toate problemele.

Funcția Clear are cinci valori:

• :stânga;
• :dreapta;
• :ambii;
• :moşteni;
• nici unul;

Prin analogie, puteți înțelege când este cel mai bine să utilizați funcția Clear. Dacă avem o linie în cod Float: dreapta;(Se înțelege codul CSS), atunci funcția ar trebui să fie Clar: corect;. Același lucru este valabil și pentru proprietăți plutește la stânga; o va completa Clear:stânga;. La scrierea codului Clar: ambele; Rezultă că elementul căruia i se aplică această funcție va fi situat sub elementele cărora li se aplică funcția Float. Moștenirea preia setări de la elementul părinte și niciunul nu face nicio modificare în structura site-ului. Înțelegând cum funcționează funcțiile Float și Clear, puteți scrie cod HTML și CSS Float unic și neobișnuit, care va face site-ul dvs. unic.

Folosind Float pentru a crea coloane

Proprietatea Float este utilă în special atunci când se creează coloane pe un site (sau aspect) Conținut CSS Plutește în centrul paginii web). Acest cod este cel mai practic și mai convenabil, așa că merită să luați în considerare mai multe opțiuni pentru a crea un șablon de site web familiar format din două coloane. De exemplu, să luăm un site web standard cu conținut în stânga, bară de navigare(bara de navigare) în dreapta, antet și subsol. Codul va fi astfel:

Acum trebuie să ne dăm seama ce este scris aici. Elementul părinte, care conține partea principală a codului html, se numește container. Vă permite să împiedicați împrăștierea elementelor cărora li se aplică funcția Float laturi diferite. Dacă nu ar fi acolo, atunci aceste elemente ar pluti până la marginile browserului.

Apoi, în cod sunt #conținut și #navigație. Funcția Float este aplicată acestor elemente. #conținutul merge la stânga și #navigația merge la dreapta. Acest lucru este necesar pentru a crea un site cu două coloane. Este necesar să specificați lățimea, astfel încât obiectele să nu se suprapună. Lățimea poate fi specificată și ca procent. Acest lucru este chiar mai convenabil decât în ​​pixeli. De exemplu, 45% pentru #conținut și 45% pentru #navigație și acordați restul de 10% proprietății marjei.

Proprietatea Clear, care se află în #footer, nu dă subsol urmărește #navigația și #conținutul, dar îl lasă în același loc în care a fost. Ce se poate întâmpla? dacă nu specificați proprietatea Clear? În acest cod, #footer va merge pur și simplu în sus și va ajunge sub #navigation. Acest lucru se va întâmpla deoarece #navigation are suficient spațiu pentru a găzdui încă un element. Pe aceasta exemplu clar Este foarte clar cum proprietățile Clear și Float se completează reciproc.

Probleme pe care le puteți întâlni la scrierea codului

Exemplele de mai sus sunt destul de simple. Dar pot apărea probleme și cu ei. În general, de fapt, se pot întâmpla o mulțime de probleme neașteptate cu funcția Float. Oricât de ciudat ar fi, problemele apar de obicei nu cu CSS-ul, ci cu codul html. Locul în care se află elementul cu funcția Float în codul html afectează direct funcționarea acestuia din urmă. Pentru a evita diferite tipuri de dificultăți, cel mai bine este să respectați regula simpla- plasați elementele cu funcția Float mai întâi în cod. Acest lucru funcționează aproape întotdeauna și minimizează comportamentul lor neașteptat.

Ciocnirea elementelor

O coliziune are loc atunci când un element părinte care conține mai mulți copii nu îi poate găzdui pe toți și se suprapun unul pe celălalt. Se întâmplă chiar ca elementele să nu fie afișate, dar să dispară de pe site. Acesta nu este o eroare de browser, ci un comportament destul de așteptat și adecvat al elementelor cu funcția Float.

Deoarece aceste elemente sunt inițial în flux normal și apoi sunt perturbate de proprietatea Float, browserul le poate elimina de pe pagina site-ului. Cu toate acestea, nu disperați, deoarece soluția este simplă și clară - utilizați proprietatea Cear. Este posibil ca dintre toate modalitățile de a scăpa de această problemă, utilizarea Clear este cea mai eficientă.

Dar problema ciocnirii elementelor paginii web poate fi rezolvată în alt mod. Există cel puțin încă două moduri:

• folosind funcția Poziție;
• folosind Flexbox.

Funcția de poziție este uneori o alternativă bună la CSS Float. Când utilizați Poziție, cel mai bine este să plasați imagini în centrul paginii web. Dacă aplicați corect valorile:absolut și:relative, elementele vor cădea la locul lor și nu se vor suprapune.

Analizarea codului funcției Poziție și Float

Merită să aruncați o privire mai atentă asupra modului de înlocuire a Float cu Poziție în codul HTML și CSS. De fapt, este foarte simplu. Să presupunem că există un #container și un element #div.

În acest exemplu, utilizarea funcției ( Div. CSS) Float vă va ajuta să creați un site web standard cu două coloane. Nu uitați niciodată de funcția Clear. Fără el, veți obține doar elemente suprapuse unul peste altul.

Deci, cum vă schimbați codul CSS și Float pentru a utiliza Postion? Foarte simplu:

poziție:relativă;

poziție:relativă;

În acest caz, #container și #div vor ocupa poziția de care are nevoie dezvoltatorul în elementul părinte. Principal? plasați #div și #container într-un element părinte care se va potrivi cu dimensiunile lor.

Flexbox - cum va ajuta această caracteristică să înlocuiască CSS Float?

Flexbox este cea mai avansată modalitate de a crea site-uri web în acest moment, așa că această caracteristică nu este acceptată de versiunile mai vechi de browsere. Acest fapt nu trebuie redus, deoarece utilizatorii cu versiuni învechite browserele nu vor putea vedea versiunea corectă a site-ului.

Flexbox nu este o proprietate, dar modul separat. De aceea suportă flexbox întreaga linie proprietăți care funcționează numai cu el. În plus, funcția de afișare, care are trei parametri inline, block și inline-block în flexbox, mai are un singur flux flex.

Cum funcționează Flexbox?

Această tehnologie va ajuta dezvoltatorul să alinieze cu ușurință elementele orizontal și vertical. Flexbox poate schimba, de asemenea, direcția și ordinea în care sunt afișate elementele. Această tehnologie are două axe: axa principală și axa transversală, în jurul cărora este construit întregul Flexbox. De asemenea, elimină efectul funcțiilor Float și Clear. Își construiește sistemul în cod, în care folosește proprietăți unice pentru el, așa că, din păcate, nu va fi posibilă duplicarea altor proprietăți, precum Float și Position, în elemente. Și acest lucru ar fi foarte util, deoarece, așa cum am menționat mai sus, Flexbox funcționează doar în versiuni noi de browsere.

Merită să ne amintim că, la sfârșitul zilei, Poziția, Flexbox și Float fac același lucru - creează neobișnuit și design original Site-ul tău. Fiecare opțiune discutată în articol face acest lucru în felul său și, prin urmare, are atât avantaje, cât și dezavantaje. În plus, se întâmplă că undeva funcția Float este perfectă (de exemplu, într-un site cu o structură simplă), dar undeva este mai bine să folosești Position sau Flexbox.

Bug cu marjă dublă

Cu toate acestea, uneori, din păcate, fiecare dezvoltator are probleme legate nu de codul scris, ci de erori dintr-un anumit tip de browser. De exemplu, există o eroare în Internet Explorer numită Double Margin Bug. Înmulțește parametrul Margin cu doi, ceea ce duce la deplasarea elementelor site-ului dincolo de limitele browserului. Pentru a evita acest lucru, trebuie doar să specificați parametrul Margin ca procent. De obicei, acest bug apare atunci când valoarea este Proprietățile marjeiși chibrituri Float.

margine-stânga:10px;

Acest cod va muta elementul în Internet Explorer 20 px la stânga. Puteți schimba codul astfel:

marja-stânga:10%;

sau așa,

margine-dreapta:10px;

Ambele opțiuni vor rezolva problema deplasării elementului.

Erori de browser și afișare incorectă a site-ului

Merită să ne amintim că Internet Explorer nu este singurul browser în care pot apărea erori. Vechi versiuni Google De asemenea, Chrome și Mozilla afișează incorect unele elemente ale site-urilor web moderne. Pentru fiecare dintre aceste erori, poate fi găsită o soluție. În general, aș dori să observ că utilizarea Float va crea un design original și atractiv pentru site-ul web. Înțelegerea elementelor de bază și a principiilor de funcționare ale acestei proprietăți vă va ajuta să evitați greșelile și să ușurați viața oricărui dezvoltator.

Toate elementele care apar pe o pagină HTML nu sunt altceva decât dreptunghiuri. Și practic doar două tipuri:

1. bloc (bloc), care ocupă toată lățimea unde se află și sunt separate de ceea ce este deasupra și dedesubtul lor. De exemplu asta etichete DIV,P,H.
2. î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.

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 folosiți proprietatea float, dreptunghiul este bloc, dar cu trăsătură caracteristică: Lățimea sa nu se va întinde pe întregul conținut. De exemplu, un antet h3 arată astfel:

acesta este HEADER h3

Dacă îl întrebi proprietate de afișare: inline;, atunci vom vedea că nu doar lățimea s-a schimbat, ci și distanța deasupra și dedesubtul elementului:

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 de 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.

Unde este distanța dintre blocuri? Dacă setați , atunci din cauza faptului că elementele plutitoare nu vor avea suficient spațiu, se vor deplasa în jos.
Problema este rezolvată prin adăugarea unui alt DIV:

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.

, unde margine-spațiere specifică distanța orizontală și verticală dintre marginile celulei.

Acum puteți vedea cum este construită galeria de imagini. Sper că nimeni nu a uitat.

Link-uri către surse:

Determină la ce parte va fi aliniat elementul, cu alte elemente curgând în jurul lui pe celelalte laturi. Când proprietatea float este setată la none , elementul este redat pe pagină ca în mod normal, dar este permis ca o linie de text de împachetare să fie pe aceeași linie cu elementul însuși.

informatie scurta

Denumiri

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

×

Valori

stânga Aliniază elementul la stânga și toate celelalte elemente, cum ar fi textul, curg în jurul lui partea dreapta. dreapta Aliniază elementul la dreapta, cu toate celelalte elemente curgând în jurul lui spre stânga. none Învelișul elementului nu este specificat.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar prânzul încă nu începuse. Și, bineînțeles, a fost teribil de bucuros să vadă că Iepurele scoate cești și farfurii.

img ( float: niciunul ; )

Exemplu

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

Rezultat acest exemplu prezentată în fig. 1.

Orez. 1. Utilizarea proprietății float

Model de obiect

Un obiect.style.cssFloat

Notă

ÎN motor de cautare Explorer 6 are o eroare cu dublarea valorii de umplutură la stânga sau la dreapta pentru elementele plutitoare imbricate în interior elementele părinte. Marja care este adiacentă laturii părintelui este dublată. Problema este de obicei rezolvată prin adăugarea display: inline la elementul plutit. Acest browser adaugă, de asemenea, o umplutură de 3 pixeli (așa-numita „bucă de trei pixeli”) în direcția valoare dată pluti

Specificație

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

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

×