Die Uitwerking van Floats op die Ouer in CSS

Laat ons nou 'n div hê waarin 'n prentjie lê. Ons sal 'n grens aan die div gee, en vir die prentjie sal ons nie die eienskap float instel nie.

Kom ons kyk hoe dit in die blaaier sal lyk:

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

div {
	border: 1px solid red;
}

Laat ons nou die eienskap float vir die prentjie stel met die waarde left. In hierdie geval sal iets merkwaardigs gebeur - die hoogte van die ouer sal verdwyn, sy onderste grens sal dadelik na die boonste een begin, en die prentjie Sal onder uit sy ouer steek:

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

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

Dit blyk dat elemente waaraan die eienskap float toegeken is, nie hul ouer in hoogte uitbrei nie.

Kom ons verander die eienskap float van left na die waarde right. Die gedrag van die ouer sal nie verander nie, maar die prentjie sal regs begin dryf:

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

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