CSS-da float va margin birgalikda

Hozir bizning matn rasmning chap tomoniga berilgan. Keling, ushbu matnni biroz siljitishga harakat qilaylik. Buning uchun bizning abzaslarga chap margin ni 30px qilib belgilaymiz, ona div esa - qizil chegaraga ega bo'ladi.

Kutilmaganda, faqat ona divga tegishli bo'lgan matn o'ngga siljiydi, rasmga tegishli matn esa harakatlanmaydi:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
}
img {
	float: left;
}

Nima uchun shunday bo'layotganini tushunish uchun, abzlarga yashil chegarani qo'shamiz:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
}

Ko'rib turganimizdek, aslida abzarlar chap chetidan siljiydi, lekin rasmdan emas, balki ona divdan. Batafsil ko'rib chiqish uchun, keling, rasmga opacity xususiyati orqali yarim shaffoflik qo'shamiz:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Endi aniq ko'rinib turibdiki, margin-left ga reaktsiya mavjud, faqat abzarlar aslida joylashgan rasm ostida. Keling, chegarani olib tashlaymiz, rasmning yarim shaffofligini saqlab qolgan holda:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Aslida bizning abzarlarimiz shunday ko'rinadi - ularning matni rasm tomonidan siljigan, lekin jismonan abzarlar rasm ostida yotadi, buni chegaradan ko'rish mumkin, u ona divning chap chegrasidan boshlanadi.

Keling, margin ni qaytarib, rasmni birinchi abzarga joylashtiramiz:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Endi rasm abzarlar bilan birga harakatlanadi!