CSSте float жана margin бирге колдонулушу

Азыр биздин текст сүрөттүн сол жагына жанчылып турат. Келгиле, бул текстти бир аз жылдырып көрөлү. Бул үчүн биздин абзацтарга сол margin 30px коёбуз, ал эми ата-эне divге - кызыл чек ара.

Күтүлбөгөндөй, оңго жылып кеткен текст ата-эне дивине жакын жаткан текст гана болот, ал эми сүрөткө жакын жаткан текст - жылбайт:

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

Эми 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;
}

Эми сүрөт абзацтар менен бирге кыймылдайт!