Proprietatea clear

Proprietatea clear anulează fluxul în jurul unui element de către alte elemente, definit de proprietatea float. Poate lua următoarele valori: none (își anulează propria acțiune), both (anulează float simultan din dreapta și din stânga), left (anulează float din stânga), right (anulează float din dreapta).

Sintaxă

selector {
	clear: none sau left sau right sau both
}

Exemplu

Să anulăm fluxul textului în jurul imaginii din stânga:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Exemplu

Acum să anulăm fluxul textului în jurul imaginii din dreapta:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Exemplu

Să anulăm acțiunea proprietății clear în sine:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Vedeți și

proprietatea bottom,
care definește poziția marginii inferioare a elementului
proprietatea top,
care definește poziția marginii superioare a elementului
proprietatea left,
care definește poziția marginii stângi a elementului
proprietatea right,
care definește poziția marginii drepte a elementului
pseudo-elementul ::backdrop,
care definește poziționarea după primul element
proprietatea caption-side,
care definește poziția titlului tabelului