การแนะนำคุณสมบัติ float ใน CSS

สมมติว่าเรามี div พร้อมข้อความยาวๆ มาแทรกรูปภาพที่ต้นข้อความนี้กัน:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

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

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

ดังนั้น ตอนนี้รูปภาพลอยไปทางซ้าย ส่วนข้อความ ก็จะล้อมรอบมันทางด้านขวา พื้นที่ว่างด้านข้าง ของรูปภาพก็หายไป

คุณสามารถให้รูปภาพลอยไปทางขวาแทนทางซ้ายได้ สำหรับสิ่งนี้ ให้กำหนด float เป็นค่า right:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: