CSS-тегі жүзбелерінің ата-анасындағы мәтін

Див үшін height қасиетін алып тастап, суреттің алдына кішкене мәтін қойайық.

Бұл жағдайда біздің дивтің биіктігі мәтіннің биіктігіне тең болады, ал сурет әлі де дивтен тыс шығады:

<div>
	мәтін
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Мәтінді суреттен кейін қойайық - нәтиже өзгермейді:

<div>
	<img src="img.png" alt="">
	мәтін
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Суреттің сол жақтан жүзетіндей етейік - нәтиже ұқсас болады:

<div>
	<img src="img.png" alt="">
	мәтін
</div>

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

Төменге тағы бір див қосайық - сурет оған да қарама-қарсы келеді:

<div>
	<img src="img.png" alt="">
	мәтін
</div>
<div>
	мәтін
</div>

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

Егер бірінші дивке суреттен әлдеқайда көп мәтін қоссаңыз, оның биіктігі суреттің биіктігінен үлкен болады - ол екінші дивке қарама-қарсы келмейді:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	мәтін
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

Бұл сәт өте маңызды - әзірлеу кезінде сіздің кейбір блоктарыңызда көп мәтін болуы мүмкін, бірақ сайттың нақты жұмыс істеуі кезінде осы блокта жоспарланғаннан аз мәтін болуы мүмкін. Нәтижесінде, бұл жағдайда жүзбелі элементтердің көрші блоктарға қарама-қарсы келу мәселесі пайда болады.