การใช้ float และ margin ร่วมกันใน CSS

ขณะนี้ข้อความของเราชิดกับรูปภาพทางด้านซ้าย ลองย้ายข้อความนี้ห่างออกไปเล็กน้อย ในการทำเช่นนี้ ให้กำหนด 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 เพียงแต่ว่าย่อหน้าจริงๆ แล้วถูกวางอยู่ ใต้รูปภาพ ลองเอา margin ออก โดย ยังคงความโปร่งแสงของรูปภาพไว้:

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

ตอนนี้รูปภาพเลื่อนไปพร้อมกับย่อหน้าแล้ว!