Totul despre proprietatea float. Cum funcționează proprietățile CSS float left și float right

După ce am fost întrebat pentru a șaizeci și opta oară de ce un bloc cu float este afișat incorect, am decis să scriu această notă, care ar explica situațiile tipice cu care se confruntă un designer de layout începător și, de asemenea, pentru a oferi pur și simplu un link către aceasta articol data viitoare.

Disclaimer

Nu sunt un designer profesionist de layout, deși din cauza naturii activității mele a trebuit să amenajez mai mult de o duzină de site-uri web. Am prieteni care învață aspectul și vreau să-i ajut. Cel mai probabil le ai si tu. Scopul acestui articol nu este de a spune ceva nou, ci de a vorbi despre vechi din punctul de vedere al celor mai frecvente probleme cu care se confruntă designerii de layout începători. Nu pretind adevărul absolut al cuvintelor mele și mă voi bucura doar dacă mă corectați și completați.

Proprietățile 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 blocurile, 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 încadra î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:

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.

Formatarea tabelelor în cascadă). Această limbă există din 1996 și încă evoluează. În acest moment, dezvoltatorii folosesc deja a treia versiune de CSS. Folosind limbajul de programare CSS, este posibil să creați un site web complet frumos și plăcut, care nu va părea depășit sau incomod pentru utilizator, chiar dacă nu utilizați JavaScript deloc. Capacitățile moderne ale celei de-a treia versiuni vă permit să faceți acest lucru.

Dezvoltatorii pot folosi, de asemenea, opțiuni de formatare mai convenabile, 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 web designer. 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 similare. Anterior, situații similare au apărut și 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 studiul proprietății 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 Google Chrome apăsând Ctrl + Shift + J. Textul, titlul, imaginea, linkurile și toate celelalte componente ale site-ului vor fi afișate în blocuri, doar în diferite dimensiuni. 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 când se folosește, de exemplu, proprietatea limbajului 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 web (sau se concentrează conținutul CSS Float pe o pagină 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 familiar format din două coloane. De exemplu, să luăm un site web standard cu conținut în stânga, o bară de navigare în dreapta, un antet și un 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 în direcții 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, împiedică subsolul să urmărească #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. Acest exemplu vizual arată în mod clar modul în care 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 diferitele tipuri de dificultăți, cel mai bine este să respectați o regulă simplă - 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 căile de ieșire din această problemă, utilizarea Clear să fie 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 :absolute și :relative, elementele vor cădea la locul lor și nu se vor suprapune.

Analiza codului funcției Poziție și Flotare

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 (CSS Div) Float în al doilea container va ajuta la crearea unui site 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ă;

Î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 ignorat, deoarece utilizatorii cu versiuni învechite de browser nu vor putea vedea versiunea corectă a site-ului.

Flexbox nu este o proprietate, ci un modul separat. Prin urmare, flexbox acceptă o serie de proprietăți care funcționează numai cu acesta. În plus, funcția de afișare, care are trei parametri inline, block și inline-block în flexbox, are un singur flex-flow.

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ă, în cele din urmă, Poziție, Flexbox și Float fac același lucru - creează un design neobișnuit și original pentru 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, această eroare apare atunci când valorile proprietăților Margin și Float se potrivesc.

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. Versiunile mai vechi de Google Chrome și Mozilla afișează, de asemenea, incorect unele elemente ale site-urilor web moderne. Pentru fiecare dintre aceste erori puteți găsi 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.

În design web modern, proprietatea pluti folosit aproape la fiecare pas. Dar, în ciuda acestei prevalențe, nu toată lumea înțelege mecanismul blocurilor plutitoare, comportamentul lor și ce consecințe poate avea utilizarea lor.

Ce este „float”?

Pluti Aceasta este o proprietate de poziționare CSS. Pentru a înțelege esența și originea acesteia, trebuie să acordați atenție designului imprimat. În machetele tipărite, imaginea poate fi poziționată astfel încât textul să curgă în jurul ei. Aceasta se numește de obicei „ împachetarea textului".

Într-un aspect de pagină, un bloc care conține text poate fi specificat pentru a fi utilizat împachetarea textului în jurul unei imagini sau ignorați ambalajul. Ignorarea împachetare a textului va permite cuvintelor să curgă peste imagine ca și cum nu ar fi acolo. Acest lucru face diferența dacă imaginea face parte din fluxul de pe pagină sau nu. În web design totul este foarte asemănător.

În design web, un element cu o proprietate CSS aplicată acestuia pluti se va comporta ca o imagine cu text înfășurat în jurul ei într-un aspect tipărit. Elementele plutitoare rămân parte din fluxul paginii web. Acest lucru este destul de diferit de elementele poziționate absolut, care sunt îndepărtate din flux, ca și cum într-un aspect tipărit blocului de text i s-a spus să ignore împachetarea imaginii. Elementele poziționate absolut nu afectează plasarea altor elemente, iar alte elemente nu afectează plasarea acestora.

Stabilirea unei proprietăți pluti pentru elementele care utilizează CSS arată astfel:

#sidebar (float: dreapta; )

Există patru valori valabile pentru proprietate pluti - stânga, dreapta, nici unul, moşteni. Primii doi stângaȘi dreapta indicați direcția locației - stânga și respectiv dreapta. Nici unul- valoarea implicită, indică faptul că elementul nu plutește și moşteni instruirea unui element să moștenească valoarea unei proprietăți pluti din elementul părinte.

Pentru ce se folosește plutitorul?

Dincolo de exemplul simplu de împachetare a textului în jurul unei imagini, pluti poate fi folosit pentru a crea machete web.

Pluti, este, de asemenea, convenabil de utilizat pentru elementele de layout mici. De exemplu, să luăm acest mic fragment al unei pagini web. Dacă stabilim proprietatea pluti Pentru o imagine mică de avatar, atunci când dimensiunea imaginii se schimbă, împachetarea se va schimba în funcție de noile dimensiuni ale imaginii:

Același aspect poate fi implementat folosind poziționarea relativă a containerului și poziționarea absolută a avatarului și a textului în interiorul acestuia. Dar într-un aspect implementat conform acestei scheme, modificarea dimensiunii imaginii nu va afecta blocul de text, deoarece elementele cu poziționare absolută nu afectează alte elemente și alte elemente nu le afectează.

Wrap reset

clar proprietate legată de proprietate pluti. Element cu set de proprietăți clar nu se va deplasa în sus în jurul unui element cu proprietatea setată pluti, dar se va deplasa în jos ignorând fluxul. Și din nou, o ilustrație care va explica totul fără alte prelungiri.

În exemplul de mai sus, bara laterală plutea în dreapta blocului de conținut principal. „Subsolul” s-a mutat în spațiul liber de sub bara laterală, curgând în jurul blocului cu conținutul principal. Pentru a rezolva această problemă, trebuie să specificați o valoare pentru proprietatea clear:both a subsolului pentru a „șterge” fluxul din jurul ambelor coloane.

#footer ( clar: ambele; )

Proprietate clar are patru sensuri. Ambii folosit pentru a elibera curgerea în ambele direcții. StângaȘi Dreapta sunt folosite pentru a reseta o direcție - stânga sau, respectiv, dreapta. Nici unul- valoare implicită. Moşteni ar putea fi a cincea valoare, dar în mod surprinzător nu este acceptată Internet Explorer. Resetarea doar a fluxului din stânga sau din dreapta este destul de rară, dar are beneficii practice.

Marele Colaps

Un lucru despre lucrul cu pluti Ceea ce este surprinzător este efectul pe care această proprietate îl are asupra elementelor părinte. Dacă elementul părinte nu conține alte elemente decât un float, atunci înălțimea lui se prăbușește literalmente. Acest lucru nu este întotdeauna vizibil, mai ales dacă elementul părinte nu are un fundal proeminent, dar este important să rețineți.

Dar alternativa la un astfel de colaps este și mai rea. Luați în considerare următorul scenariu:

Dacă blocul de sus se extinde automat pentru a găzdui elementul plutitor, vom ajunge cu un decalaj în fluxul de text între paragrafe, fără nicio modalitate de a-l remedia. Dacă ar fi așa, atunci dezvoltatorii s-ar plânge mult mai des de acest comportament al blocurilor plutitoare decât fac acum despre colaps.

Colapsul trebuie reținut întotdeauna pentru a preveni comportamentul ciudat de aspect și problemele între browsere. Putem rezolva această problemă folosind clar după elementul plutitor din container, dar înainte ca containerul să se închidă.

Tehnici de anulare a ambalajului

Dacă vă aflați într-o situație în care știți unde va fi următorul element, puteți folosi clear:both și vă ocupați de afacerea dvs. Acest lucru este ideal, deoarece nu necesită niciun hack sau elemente suplimentare. Dar, din păcate, de obicei nu totul merge așa cum ne dorim, iar în acest caz puteți folosi următoarele instrumente.

Metoda blocului gol.

Este literalmente un bloc gol.

. Uneori poți găsi un element
sau orice alt element aleatoriu, dar div este cel mai comun, deoarece nu are un stil implicit în browsere, nu are nicio funcție specială și este puțin probabil să fie în stilul CSS general. Această metodă este respinsă de puriștii semantici deoarece prezența ei nu are nicio semnificație contextuală pe pagină și este acolo doar pentru apariție. Desigur, în sens strict au dreptate, dar el își face treaba și nu face rău nimănui.

Metoda overflow.

Bazat pe specificarea proprietăților CSS revărsare pentru elementul părinte. Dacă această proprietate este setată la auto sau ascuns pentru elementul părinte, se va extinde după elementul plutitor, resetând efectiv învelișul său pentru elementele ulterioare. Această metodă poate fi frumoasă din punct de vedere semantic, deoarece nu necesită elemente suplimentare. Cu toate acestea, după cum puteți vedea, am adăugat un nou div pentru a utiliza această metodă, care este echivalentă cu utilizarea unui bloc nesemantic gol și este mai puțin flexibilă. De asemenea, trebuie amintit că proprietatea revărsare nu are scopul de a dezactiva împachetarea. Aveți grijă să nu ascundeți accidental conținutul sau să nu provocați bare de defilare nedorite.

Metodă ușoară de curățare.

Utilizează un pseudo-selector CSS (:after) pentru a elimina împachetarea. În loc să folosiți proprietatea revărsare Pentru elementul părinte, setați o clasă suplimentară pentru acesta, de exemplu „clearfix” și utilizați următorul stil CSS:

Clearfix:după (conținut: "."; vizibilitate: ascuns; afișare: bloc; înălțime: 0; clar: ambele; )

Aceasta folosește o mică bucată de conținut ascuns vederii, situată după elementul părinte, care resetează wrap-ul. Această metodă nu este completă, deoarece trebuie îmbunătățită pentru a suporta browsere mai vechi.

Situații diferite necesită metode diferite de ameliorare cacealma. Să luăm ca exemplu o grilă de diferite tipuri de blocuri.

Pentru a combina vizual mai bine blocurile similare, ar trebui să începem o nouă linie atunci când culoarea se schimbă. Putem folosi metoda overflow sau light clearing dacă fiecare grup de culori are un element părinte. Sau folosim metoda blocurilor goale între grupuri. Trei blocuri părinte care nu existau anterior sau trei blocuri goale care nu existau anterior. Depinde de tine să decizi care metodă este mai bună.

Probleme cu elementele plutitoare

Elementele plutitoare sunt adesea criticate din cauza fragilității lor. O mare parte din această fragilitate provine de la IE6 și de la acesta bug-uri orientate spre plutire. Dar, pe măsură ce tot mai mulți dezvoltatori renunță la suportul pentru IE6, s-ar putea să nu vă gândiți la asta, dar pentru cei cărora le pasă de compatibilitate, iată o listă scurtă.

Apasa in jos, este un simptom că elementul din interiorul blocului plutitor este mai lat decât acel bloc (acest lucru se întâmplă de obicei cu imagini). Majoritatea browserelor vor afișa elementul plutit în afară, dar acest lucru nu va avea niciun efect asupra aspectului. IE va extinde blocul plutitor și adesea acest lucru are un efect drastic asupra aspectului. Un exemplu tipic este o imagine care iese din blocul de conținut principal, împingând bara laterală în jos.

Soluție rapidă la problemă: folosi overflow: ascuns; pentru a tăia excesul.

Bug cu marjă dublă- un alt lucru de reținut când lucrați cu IE6. Acest bug se exprimă prin faptul că dacă câmpul este pe aceeași parte cu care este orientat pluti, terenul este dublat. De exemplu:

Vom intra în câmpul din stânga 40px., în loc de 20px.

Soluție rapidă la problemă: Setați afișarea: în linie pentru blocul plutitor și nu vă faceți griji, elementul va rămâne la nivel de bloc.

Jog 3px. Esența acestui bug este că textul situat lângă elementul plutitor este deplasat în mod ciudat cu trei pixeli, ca sub influența unui câmp de forță situat în jurul elementului plutitor. Soluție rapidă la problemă: Setați lățimea și înălțimea textului afectat.

Apare în IE7 Bug marginea inferioară, când elementul părinte este un element plutitor și copilul său situat în interiorul acestuia este și un element plutitor. Marginea inferioară (marja-inferioară) a copilului este ignorată de elementul strămoș. Soluție rapidă la problemă: Folosiți padding-bottom pe elementul părinte în loc de margin-bottom pe elementul copil.

Bună ziua, dragi cititori ai blogului! După o pauză foarte semnificativă, am decis să continui subiectul studierii CSS și articolul de astăzi va fi dedicat creării de elemente plutitoare folosind float, folosind exemple practice ne vom uita la efectul acestei reguli, împreună cu proprietatea clear, pentru crearea coloanelor și un meniu orizontal.

Pentru cei neinițiați, cred că ar fi mai bine să înceapă prin a citi alte materiale pe foi de stil în cascadă. Permiteți-mi să vă reamintesc că toate articolele pe această temă sunt în secțiunea de unde puteți obține informațiile necesare.

Elementele plutitoare se găsesc și în HTML atunci când este necesar să se creeze text în jurul acelorași imagini (atributul align al etichetei img cu parametrii stânga și dreapta). Deci acest aspect este destul de popular atunci când se dezvoltă conținutul paginii web.

Pe parcursul publicației de astăzi vom analiza float (stânga, dreapta, niciunul) și acțiuni clare pentru reguli inclusiv în ceea ce privește, care stau la baza aspectului blocului. Desigur, în stadiul actual, marea majoritate utilizează CMS progresiv (în special, WordPress) atunci când creează un site web. Cu toate acestea, credeți că cunoașterea elementelor de bază ale stilurilor și limbajului de marcare hipertext vă va fi de folos în viitor.

Cum se creează elemente plutitoare în CSS folosind float

Pentru început, permiteți-mi să vă reamintesc că într-un flux normal, elementele web sunt aranjate pe o pagină web în strictă conformitate cu ordinea specificată în cod. Cu toate acestea, după cum știți, există întotdeauna excepții. Acest lucru este logic, deoarece este nevoie de pârghie pentru a rezolva probleme non-standard.

Unul dintre aceste instrumente este, de exemplu, despre care puteți citi mai multe la linkul furnizat. Ei bine, un alt mijloc de a schimba ordinea de afișare standard a elementelor web este regula flotant.

Datele despre orice proprietate CSS (proprietate) și valorile acesteia pot fi adunate din pagina de specificații W3C, unde sunt date informații complete (date pentru a doua versiune a foilor de stil, dar acest lucru este valabil și pentru CSS3, care este deja oficial în forță, deși nu este complet dezvoltată):

După cum puteți vedea, float poate lua unul dintre cei trei parametri posibili (stânga, dreapta, niciunul) și (moștenire). parametru float none aplicat implicitși înseamnă că elementele vor fi afișate în ordinea care urmează fluxului normal. Dar dreapta sau stânga vă permit să creați blocuri plutitoare cu un decalaj la dreapta sau, respectiv, la stânga.

Dacă vă amintiți, cele mai frecvent utilizate se comportă diferit (în general, tipul de afișare al tuturor elementelor este implementat folosind CSS folosind proprietatea Display). Cele bloc ocupă toată lățimea disponibilă, cu excepția cazului în care este specificată o valoare a lățimii. Înălțimea este determinată de conținut dacă parametrul de înălțime nu este specificat.

Etichetele în linie sunt plasate pe o linie și sunt mutate pe alta numai dacă spațiul disponibil pentru lățime se epuizează. În cazul normal, este imposibil să le specificați înălțimea și lățimea. Pe baza acestor informații, să ne uităm la un exemplu specific.

Pentru claritate, să includem reguli CSS (această metodă este de obicei folosită rar în practică, dar este foarte convenabilă pentru testare).

Pentru a ne asigura că cele de mai sus sunt corecte, să luăm două etichete inline, specificând proprietățile de lățime și înălțime pentru ele, precum și o etichetă de bloc. Pentru a asigura claritatea, să setăm nuanțele de culoare pentru fiecare bloc folosind fundal (puteți face același lucru):

Elementul în linie 1 Element în linie 2

Element bloc

Imaginea rezultată va fi după cum urmează:

După cum puteți vedea, am primit confirmarea practică că înălțimea (înălțimea:50px) și lățimea (lățimea:450px) specificate nu funcționează în condiții normale pentru eticheta SPAN, care este în linie. Apoi, să încercăm să setăm proprietatea float right pentru primul element web inline și proprietatea float left pentru al doilea:

Elementul în linie 1 Element în linie 2

Element bloc

Ca rezultat obținem:

Este destul de evident că în acest caz primul și al doilea element de rețea devin plutitoare (unul s-a deplasat până la stânga, celălalt la dreapta). În plus, au dobândit lățime și înălțime, care sunt specificate în stilurile CSS.

Mai mult, elementele web definite de eticheta inline SPAN interacționează diferit cu containerul DIV adiacent. Dacă mai eliminăm, de exemplu, atributul width din stilurile ambelor etichete SPAN, atunci lățimea acestora va fi determinată de conținut (în cazul nostru, lungimea textului cu numele elementelor):

Acum, conținutul blocului DIV începe să curgă în dreapta elementului web cu float: left. Este logic să vă familiarizați mai clar cu rezultatele cercetării practice specifice pe această pagină web, unde puteți încerca să schimbați singur zona de vizualizare și să observați cum se comportă blocurile unul față de celălalt:

Pentru a rezuma, să definim câteva caracteristici care vor fi inerente unui container cu una sau alta valoare a proprietății float (dreapta sau stânga):

Elementul este decalat la marginea din stânga sau din dreapta;
Devine blocată indiferent de ceea ce a fost înainte;
Se comportă ca și cum elementele web de bloc adiacente (cu regula afișare:bloc) nu ar exista. Puteți verifica acest lucru dacă aruncați o altă privire la capturile de ecran din această secțiune a articolului;
În același timp, etichetele inline (display:inline) se vor înfășura în jurul blocurilor plutitoare. Dacă te uiți din nou la captura de ecran anterioară, vei observa că conținutul containerului DIV ("Block Element") se înfășoară în jurul SPAN cu float:left la dreapta.
Dacă nu specificați în mod explicit lățimea blocului plutitor (în exemplul nostru, width:450px), atunci aceasta va fi determinată de conținutul acestuia;

În acest exemplu, ne-am uitat la principalele caracteristici ale blocurilor flotante cu diferiți parametri de proprietate flotant și am ales atât elementele web inline, cât și bloc (cu valori diferite de afișare) pentru a complica sarcina. Pentru a consolida materialul, asigurați-vă că urmăriți videoclipul informativ de la E. Popov:

Cum să faci un meniu orizontal folosind CSS (float)

În continuare, vom analiza o sarcină foarte specifică de creare a unui meniu orizontal folosind blocuri plutitoare, care este foarte des folosită în dezvoltarea site-urilor web. Mai întâi, să construim unul, al cărui cod va arăta astfel:

Paragraful 1
Punctul 2
Punctul 3
Punctul 4
Punctul 5

Primim ceva de genul asta:

Acum haideți să edităm puțin meniul rezultat folosind proprietățile CSS: eliminați marcajele de lângă fiecare element folosind niciunul în stil listă, convertiți literele mici în bloc, aplicând regula blocului de afișare și, de asemenea, pentru varietate, oferiți fiecăruia un fundal frumos .

De asemenea, ar fi o idee bună să setați o marjă pentru a îmbunătăți și mai mult designul, depărtând ușor elementele de meniu unele de altele. Pentru paginile web ale unui site WordPress, puteți seta eticheta UL „meniu”, pentru care specificați stilurile necesare în fișierul STYLE.CSS:

Meniu (list-style:none;margin:0;padding:15px;) .menu li a(display:block;padding:10px;background:#EFCDB8;) .menu li(margin:10px;)

În acest caz, nu folosesc în mod intenționat atributul STYLE, deoarece m-ar forța să specific aceleași proprietăți CSS de mai multe ori pentru fiecare etichetă LI. Ca urmare a acțiunilor noastre, meniul va arăta astfel:

Diferența față de versiunea anterioară este izbitoare, nu-i așa? Acum avem o imagine care seamănă mult mai mult cu un meniu clasic. Adevărat, punctele din el nu sunt situate orizontal, ci vertical. Pentru a rezolva complet problema, trebuie să adăugați proprietatea float left la elementul HTML al listei LI, pentru că regula CSS va fi astfel:

Meniu li(margin:10px;float:left;)

Ca rezultat, meniul se va transforma într-o versiune orizontală:

Cred că, pe baza informațiilor furnizate mai sus, înțelegeți motivul pentru care s-a produs o astfel de metamorfoză. Fiecare element web al unui meniu cu float stânga este ghidat de locația containerului, marginile acestuia și încearcă să ocupe spațiu deplasându-se cât mai sus și la stânga posibil. Așa s-a întâmplat cu blocul „Punctul 1”, care a fost poziționat corespunzător.

„Elementul 2” s-a mutat și el la stânga, dar avansarea sa ulterioară a fost blocată de primul element web al meniului. Și așa mai departe. Ca rezultat, am primit un lanț secvenţial orizontal al tuturor componentelor meniului. Toate detaliile le puteți vedea singur. Acum să încercăm să reducem artificial lățimea ferestrei de vizualizare:

În cazul în care un element plutitor nu găsește un loc în partea de sus, acesta ocupă poziția verticală a celei mai înalte poziții din rândul de mai jos și este deplasat în poziția extremă din stânga. În practică, se întâmplă adesea ca numele unui anumit articol să fie mai lung și să nu se încadreze în limitele standard. Dacă acesta este primul element, atunci întregul meniu poate arăta astfel:

În acest caz, „Elementul 4” ia în considerare mai întâi chenarul cel mai înalt de sus și abia apoi se deplasează în poziția extremă din stânga, dar se lovește de primul element web. Dacă înălțimea, să zicem, al treilea punct se dovedește a fi mai mare, atunci imaginea se schimbă în următoarele:

Apoi „Elementul 3” își va alinia poziția cu marginea de jos a ultimului element web din rândul de sus și abia apoi se va muta la stânga. Toate mișcările descrise mai sus ar trebui să vă ajute să înțelegeți esența efectului float asupra aranjamentului elementelor web pe o pagină.

Dacă apar probleme similare în aspectul practic, atunci în loc de proprietatea CSS float, puteți utiliza alte metode pentru a crea un meniu orizontal. Cu toate acestea, acesta este un subiect separat la care ne vom întoarce cu siguranță în viitor.

Efectul aplicării proprietății clear (ambele, stânga, dreapta).

Acum să vedem cum să folosiți caracteristicile elementelor plutitoare în avantajul dvs., dar în același timp forțați următoarele blocuri de pe pagina web să țină cont de poziția și dimensiunea lor. Acest lucru poate fi realizat folosind regula clară. Din nou, toate informațiile pot fi obținute de la sursa originală (consorțiul W3C):

Regulă CSS clear are patru valori posibile, cu proprietatea niciuna fiind implicită, ceea ce este natural, deoarece asigură fluxul de cod standard. De asemenea, clar (niciunul, stânga, dreapta, ambele) este moștenit de la eticheta părinte (moștenire).

Esența acestei reguli, scrisă pentru un anumit bloc, este anularea unei acțiuni în funcție de valoarea acesteia:

niciunul - anulează efectul proprietății clear în sine, ca urmare, conținutul etichetei (de exemplu, text) se înfășoară în jurul elementului web în conformitate cu stilurile specificate pentru acesta sub formă de float;
stânga și dreapta - elimină fluxul în jurul marginii din stânga sau din dreapta, respectiv;
ambele - împiedică curgerea atât în jurul dreptului, cât și în cel stâng. Aceasta este cea mai comună valoare a clarului în utilizare practică.

Nu pot înțelege nimic? Înțelegi sensul vag și numai prin intuiție? Nimic, după ce ne uităm la un exemplu clar, cred că totul va cădea la loc. Pentru a face acest lucru, să setăm sarcina: plasați două blocuri pe orizontală unul lângă celălalt și plasați un text în partea de jos. Acest design este destul de comun în aspect.

Deci, să luăm două containere DIV, care pot reprezenta schematic 2 coloane. Să scriem proprietăți CSS pentru ele, inclusiv lățime fixă(lățime), culoarea de fundal și transformarea lor în flotoare folosind float left. Să le adăugăm text, inclus în eticheta P, care, după cum știți, este litere mici:

Coloana din stânga

Coloana din dreapta

DIV-urile se vor alinia într-un rând orizontal, primul fiind cât mai în stânga posibil. Iar cel de-al doilea va parca la marginea din dreapta (pentru acesta va fi locația din stânga) și nu va permite primului div să se deplaseze mai departe. Dar textul va continua acest rând, deoarece lățimea totală permite acest lucru:

După cum înțelegeți, în această situație sarcina noastră nu poate fi considerată finalizată. În primul rând, când restrângeți fereastra de vizualizare cu o sumă mai mică decât lățimea totală a div-urilor, coloana din dreapta sare în josși se află sub stânga. În al doilea rând, conținutul celui de-al treilea element web cu text este situat lângă și nu în partea de jos a coloanelor:

Din nou, puteți vedea singur cum se comportă toate elementele, îngustând și extinzând artificial zona de vizualizare. Pentru a elimina deficiențele descrise, vom adăuga un container cu proprietăți CSS și vom plasa toate straturile existente în interiorul acestuia. Vom adăuga, de asemenea, un DIV gol suplimentar cu regula CSS clear ambele pentru a împiedica conținutul blocului de jos (text) să curgă în jurul coloanelor din dreapta și din stânga:

Coloana din stânga

Coloana din dreapta

Vă rugăm să rețineți că pentru stilurile mari de dive I marjă adăugată: 0 regulă automată, care poate fi folosit pentru a centra recipientul. Vederea rezultată va arăta astfel:

Acum problema noastră este rezolvată, deoarece rezultatul îndeplinește condițiile stabilite: două coloane sunt situate într-un rând orizontal, iar conținutul elementului web de sub cod (TEXT) va rămâne rigid la locul potrivit sub coloane.

Dacă lățimea zonei de vizualizare este redusă, designul va rămâne în forma sa originală (și va avea loc derularea orizontală), pe care o puteți verifica accesând pagina web corespunzătoare cu soluția acestui exemplu. În plus, urmăriți videoclipul de la Evgeny Popov, care oferă un exemplu de marcare a paginii web folosind float și clear: