CSS-də float valideynində mətn

Gəlin div üçün height xassəsini aradan qaldıraq və şəkildən əvvəl kiçik bir mətn qoyaq.

Bu halda divimizin hündürlüyü mətnin hündürlüyünə bərabər olacaq, şəkil isə hələ də divin xaricində çıxacaq:

<div>
	mətn
	<img src="img.png" alt="">
</div>

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

Gəlin mətni şəkildən sonra qoyaq - nəticə dəyişməyəcək:

<div>
	<img src="img.png" alt="">
	mətn
</div>

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

Gəlin şəklin sol tərəfə üzməsini təmin edək - nəticə oxşar olacaq:

<div>
	<img src="img.png" alt="">
	mətn
</div>

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

Gəlin aşağıya başqa bir div əlavə edək - şəkil onun da üzərinə düşəcək:

<div>
	<img src="img.png" alt="">
	mətn
</div>
<div>
	mətn
</div>

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

Əgər birinci divə hündürlüyü şəkildən böyük olacaq qədər çox mətn əlavə etsək - o, ikinci divin üzərinə düşməyəcək:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	mətn
</div>

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

Bu məqam çox vacibdir - inkişaf etdirərkən belə ola bilər ki, hansısa blokda sizin kifayət qədər çox mətniniz olsun, sonra isə saytın real işləməsi zamanı bu blokda nəzərdə tutulduğundan daha az mətn olsun. Belə çıxır ki, bu halda üzən elementlərin qonşu blokların üzərinə düşməsi problemi özünü göstərəcək.