CSS да float ва margin бирлашмаси

Ҳозир бизнинг матнимиз расмдан чап томонга боскилган холда. Келинг, ушбу матнни бир оз силжитиб кўрамиз. Бунинг учун биз абзацларимизга чап marginни 30px қийматда берамиз, ѐнда див-отага қизил чекни берамиз.

Кутганимиздан фарқли равишда, фақат див-отага тегишли бўлган матн ўнгга силжийди, расмга тегишли бўлган матн эса силжимайди:

<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;
}

Бу нима учун шундай эканлигини тушуниш учун, абзацларга яшил чек қўшамиз:

<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 хусусияти орқали ярми-шаффофлик қўшайлик:

<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;
}

Мана энди аниқ кўриниб турyбдики, margin-leftга жавоб бор, лекин абзацлар аслида расмнинг остида жойлашган. Келинг, четланишни олиб ташлайлик, шу билан бирга расмнинг ярми-шаффофлигини қолдирамиз:

<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;
}

Абзацларимизнинг аслидаги кўриниши шудир - уларнинг матни расм томон силжитирилган, лекин физик жиҳатдан абзацлар расмнинг остида ѐтади, бу чеки див-отанинг чап чекидан бошланишидан кўриниб турибди.

Келинг, marginни қайтарамиз ва расмни биринчи абзацнинг ичига солиб қўямиз:

<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;
}

Энди расм абзацлар билан бирга харакат қилади!