CSS-ում float-ի և margin-ի համադրություն

Այժմ մեր տեքստը ձախ կողմից սեղմված է նկարին: Փորձենք մի փոքր հեռացնել այս տեքստը: Դրա համար մեր պարբերություններին տանք ձախ margin 30px, իսկ ծնող div-ին՝ կարմիր սահման:

Անսպասելիորեն աջ կտեղափոխվի միայն այն տեքստը, որը հարում է ծնող 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;
}

Ինչպես տեսնում ենք, իրականում պարբերությունները հեռանում են ձախ եզրից, բայց ոչ թե նկարից, այլ ծնող div-ից: Մանրամասն դիտարկելու համար եկեք ավելացնենք նկարի կիսաթափանցիկություն 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;
}

Ահա այսպես են իրականում նկատվում մեր պարբերությունները - նրանց տեքստը հեռացված է նկարով, բայց ֆիզիկապես պարբերությունները գտնվում են նկարի տակ, դա երևում է սահմանից, որն սկսվում է ծնող div-ի ձախ եզրից:

Եկեք վերադարձնենք 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;
}

Այժմ նկարը շարժվում է պարբերությունների հետ միասին: