`float și clear` în CSS

Mută un element la stânga sau la dreapta containerului și lasă textul să curgă în jurul lui, ca într-o revistă.

Sintaxă CSS

float: left;
float: right;
float: none;
float: inline-start; /* valoare logică, după direcția textului */

clear: both;

.container { display: flow-root; } /* cuprinde elementele flotante */

Ce face `float și clear`

float scoate elementul din fluxul normal și îl împinge spre marginea stângă sau dreaptă a containerului. Textul și elementele inline din jur se așază pe lângă el. Utilizarea de bază, care rămâne valabilă și azi: o imagine într-un articol, înconjurată de paragrafe.

clear spune unui element să nu stea lângă elementele flotante, ci să coboare sub ele (left, right sau both). Pentru ca un container să-și cuprindă copiii flotanți (altfel înălțimea lui devine 0), folosește display: flow-root, varianta modernă a vechiului „clearfix”.

Pentru layout-uri de pagină (coloane, bare laterale, grile de carduri) nu mai folosi float: Flexbox și Grid fac aceeași treabă mai simplu și mai previzibil.

Valori uzuale

Valoare	Descriere
`left / right`	Elementul se lipește de marginea stângă / dreaptă; restul conținutului curge pe lângă.
`inline-start / inline-end`	Variante logice: urmează direcția textului (stânga în română, dreapta în arabă).
`none`	Valoarea implicită: elementul rămâne în fluxul normal.
`clear: both`	Elementul coboară sub toate elementele flotante dinaintea lui.
`display: flow-root`	Pus pe container, îl face să-și cuprindă complet copiii flotanți.

Exemple

Exemplul 1: Imagine într-un articol, cu textul în jurul ei

Fotografia se lipește la stânga, iar paragrafele despre Iași curg pe lângă ea, cu o margine de respiro.

.articol img.foto-iasi {
  float: left;
  width: 240px;
  margin: 0 16px 8px 0;
  border-radius: 8px;
}

Efect vizual în browser

Imaginea de 240px stă în colțul din stânga sus al articolului. Primele rânduri de text stau în dreapta ei, la 16px distanță; sub imagine, textul revine pe toată lățimea.

Exemplul 2: Container care își cuprinde imaginea flotantă

Fără flow-root, chenarul cardului ar trece prin imagine, pentru că imaginea flotantă nu adaugă înălțime părintelui.

.card-produs {
  display: flow-root;
  border: 1px solid #cbd5e1;
  padding: 12px;
}
.card-produs img {
  float: right;
  width: 120px;
  margin-left: 12px;
}
.card-produs .pret {
  clear: both;
  font-weight: 700;
}