CSS-тегінің әкесіне әсері

Енді бізде див бар делік, оның ішінде сурет орналасқан. Дивге шекара береміз, ал суретке float қасиетін әлі бермейміз.

Мұның браузерде қалай көрінетінін көрейік:

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

div {
	border: 1px solid red;
}

Ендь суретке float қасиетін left мәніне орнатайық. Бұл жағдайда таңғажайып нәрсе болады - әкесінің биіктігі жоғалады, оның төменгі шекарасы жоғарғы шекарадан кейін бірден басталады, ал сурет өз әкесінен төмен шығады:

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

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

float қасиеті берілген элементтер өз әкесін биіктікке дейін кеңейтпейді.

float қасиетіне left орнына right мәнін жазайық. Әкесінің мінез-құлқы өзгермейді, бірақ сурет оң жақтан жүзе бастайды:

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

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