Клиарфикс жана CSS'те ата-энесинин бийиктиги

Келгиле, классты parent бир див гана калтырып, андагы текстти алып салалы, жүзөгө ашырылган сүрөттү гана калтыралы. Сиздер мурунтан эле билесизер, бул учурда дивдин бийиктиги нөлгө тарап кетет, андан жогорку жана төмөнкү чек арасы гана калат. Сүрөт болсо биздин дивдин төмөн жагынан тышкары чыгып кетет:

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

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

Келгиле, жүзөгө ашырылган сүрөт биздин дивдин бийиктигин көбөйтсүн деп кылалы. Бул үчүн айлакер ыкма колдонулат - сүрөттүн артынан текстсиз, классты clearfix див коёлу.

Биздин сүрөт жүзөгө ашырылган элемент болгондуктан, ата-энесинин бийиктигин көбөйтпөйт, бирок див-клиарфикс - жүзөгө ашырылган эмес жана ата-энесинин бийиктигине таасир этет.

Див-клиарфикске clear касиети ыйгарылгандыктан, ал сүрөттүн түрткүсү менен төмөн түшүп, анын астында туруп, ошону менен бирге ата-энесинин бийиктигин көбөйтөт.

Див-клиарфикснин өзү бош жана экранда көрүнбөйт, бирок ошону менен бирге ата-энесинин бийиктигин көбөйтөт.

Ошентип, келгиле аракет кылалы:

<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;
}