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

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

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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

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

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

Результат:

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