CSS-de klirfiks we eýeniň beýikligi

Bir diwi, klassy parent bolan, galdyralyň, ondaky teksti aýyryň, diňe ýüzüjüň suratyny goýuň. Bilşiňiz ýaly, bu ýagdaýda diwiň beýikligi nola çenli azalýar, ondan diňe ýokarky we aşaky çäginde galýar. Surat bolsa aşakdan diwimiziň daşyna çykýar:

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

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

Ýüzüjüň suratymyzyň diwiň beýikligini giňeltmegine göz ýetireýäň. Bunuň üçin aýlaýyş ulanylýar - suratdan soň klassy clearfix bolan, teksti bolmadyk diwi goýuň.

Suratymyz ýüzüjüň element we eýeniň beýikligini giňeltmeýär, ýöne diw-klirfiks - ýüzmeýän we eýeniň beýikligine täsir edýär.

Diw-klirfikse aýratynlyk clear bellendi, şonuň üçin ol surat tarapyndan aşaga itiler we onuň aşagynda durup, şol ýerde eýeniň beýikligini giňelder.

Diw-klirfiks özi boş we ekranda görünmeýär, ýöne eýeniň beýikligini giňelder.

Şeýlelik bilen, synaýalyň:

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

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

.clearfix {
	clear: both;
}