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

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

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

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

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

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

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

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

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

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

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

ใช้ข้อความยาว แทรกรูปภาพหนึ่งที่ต้นข้อความ และอีกรูปภาพหนึ่งที่กลางข้อความ ทำให้รูปภาพแรกลอยไปทางซ้าย และรูปที่สองลอยไปทางขวา