float-ის და margin-ის კომბინაცია CSS-ში

ამჟამად ჩვენი ტექსტი მიკრულია სურათთან მარცხენა მხრიდან. მოდით, ვცადოთ ამ ტექსტის ოდნავ გადაწევა. ამისთვის მივანიჭოთ ჩვენს აბზაცებს მარცხენა 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;
}

ახლა კი ზუსტად ჩანს, რომ რეაქცია 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;
}

ახლა სურათი აბზაცებთან ერთად მოძრაობს!