ข้อความในพาเรนต์ของฟล็อตใน CSS

ลองลบคุณสมบัติ height ออกจาก div และใส่ข้อความสั้นๆ ก่อนรูปภาพ

ในกรณีนี้ความสูงของ div ของเราจะเท่ากับ ความสูงของข้อความ และรูปภาพจะยังคงยื่นออกมา นอก div:

<div>
	ข้อความ
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

ลองใส่ข้อความหลังจากรูปภาพ - ผลลัพธ์ จะไม่เปลี่ยนแปลง:

<div>
	<img src="img.png" alt="">
	ข้อความ
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

ลองทำให้รูปภาพลอยไปทาง ขอบซ้าย - ผลลัพธ์จะคล้ายกัน:

<div>
	<img src="img.png" alt="">
	ข้อความ
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

ลองเพิ่ม div อีกอันด้านล่าง - รูปภาพ จะทับมัน:

<div>
	<img src="img.png" alt="">
	ข้อความ
</div>
<div>
	ข้อความ
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

แต่ถ้าใน div แรกเพิ่มข้อความ มากพอจนความสูงของมันมากกว่าขนาดรูปภาพ - มันจะไม่ทับลงบน div ที่สอง:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	ข้อความ
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

ประเด็นนี้สำคัญมาก - ในระหว่างการพัฒนา อาจมีกรณีที่ในบางบล็อกของคุณ มีข้อความค่อนข้างมาก แต่เมื่อ เว็บไซต์ทำงานจริงในบล็อกนี้จะมี ข้อความน้อยกว่าที่วางแผนไว้ ผลที่ได้คือ ในกรณีนี้ปัญหาของการทับซ้อน ขององค์ประกอบที่ลอยอยู่บนบล็อกข้างเคียงจะปรากฏขึ้น