การจัดการการลอย (Float) ใน CSS

สมมติว่าตอนนี้เรามีสอง div ด้วยคลาส parent ในแต่ละอันมีข้อความเล็กน้อย และใน div แรกมีรูปภาพที่กำหนดคุณสมบัติ float เป็นค่า left

อย่างที่คุณทราบแล้ว ในกรณีนี้รูปภาพจะ ซ้อนทับบนบล็อกที่สอง:

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

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

Результат:

มาเรียนรู้ในบทเรียนถัดไปว่า จะหลีกเลี่ยงการซ้อนทับหรือการไหล แบบนี้ได้อย่างไร