Anularea fluxului cu proprietatea clear în CSS

Pentru a rezolva această problemă, există o proprietate specială clear, care anulează fluxul. Valoarea left anulează fluxul din stânga, valoarea right - din dreapta, iar valoarea both - de pe ambele părți. Această valoare este cea mai des folosită.

Deci, proprietatea clear anulează fluxul. În cazul nostru, acest lucru ne va permite să facem astfel încât imaginea flotantă din primul div să nu se suprapună pe al doilea div.

În acest caz, clear trebuie aplicat acelui element peste care elementele flotante nu ar trebui să se suprapună, adică în cazul nostru, ar trebui să-l aplicăm celui de-al doilea div.

Haideți să facem acest lucru - să dăm celui de-al doilea div pe lângă clasa parent și clasa clearfix și pentru această nouă clasă să setăm proprietatea clear cu valoarea both - suprapunerea imaginii va dispărea:

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent clearfix">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

Denumirea clearfix este general acceptată, prin urmare, în continuare, folosiți exact aceasta.