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