CSS'te float ve margin Birlikteliği

Şu anda metnimiz resmin sol tarafına dayalı durumda. Bu metni biraz uzaklaştırmayı deneyelim. Bunun için paragraflarımıza sol margin olarak 30px ve ana div'e kırmızı bir kenarlık verelim.

Beklenmedik bir şekilde, sadece ana dive bitişik olan metin sağa doğru çekilirken, resme bitişik olan metin uzaklaşmaz:

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

Bunun neden böyle olduğunu anlamak için paragraflara yeşil bir kenarlık ekleyelim:

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

Gördüğümüz gibi, aslında paragraflar sol kenardan uzaklaşıyor, ancak resimden değil, ana div'den. Daha ayrıntılı incelemek için, resme opacity özelliği ile yarı saydamlık ekleyelim:

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

İşte şimdi margin-left'e bir tepki olduğu net görülüyor, ancak paragraflar aslında resmin altında konumlanmış durumda. Şimdi boşluğu kaldıralım ve resmin yarı saydamlığını koruyalım:

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

İşte paragraflarımızın gerçekte nasıl göründüğü böyle - metinleri resim tarafından itilmiş, ancak fiziksel olarak paragraflar resmin altında yatıyor, bu, ana div'in sol kenarından başlayan kenarlıkta görülebiliyor.

Şimdi margin'i geri getirelim ve resmi ilk paragrafın içine yerleştirelim:

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

Şimdi resim paragraflarla birlikte hareket ediyor!