คุณสมบัติ clear

คุณสมบัติ clear ยกเลิก การไหลขององค์ประกอบอื่นๆ รอบองค์ประกอบหนึ่ง ที่กำหนดโดยคุณสมบัติ float สามารถรับค่าต่อไปนี้ได้: none (ยกเลิกการทำงานของตัวมันเอง), both (ยกเลิก float ทั้งจากขวาและซ้ายพร้อมกัน), left (ยกเลิก float จากซ้าย), right (ยกเลิก float จากขวา)

ไวยากรณ์

ตัวเลือก {
	clear: none หรือ left หรือ right หรือ both
}

ตัวอย่าง

เรามายกเลิกการไหลของข้อความรอบภาพ จากด้านซ้าย:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

ตัวอย่าง

ตอนนี้เรามายกเลิกการไหลของข้อความรอบภาพ จากด้านขวา:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

ตัวอย่าง

เรามายกเลิกการทำงานของตัว คุณสมบัติ clear เอง:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

ดูเพิ่มเติม

คุณสมบัติ bottom,
ซึ่งกำหนดตำแหน่งของขอบด้านล่างขององค์ประกอบ
คุณสมบัติ top,
ซึ่งกำหนดตำแหน่งของขอบด้านบนขององค์ประกอบ
คุณสมบัติ left,
ซึ่งกำหนดตำแหน่งของขอบด้านซ้ายขององค์ประกอบ
คุณสมบัติ right,
ซึ่งกำหนดตำแหน่งของขอบด้านขวาขององค์ประกอบ
องค์ประกอบเทียม ::backdrop,
ซึ่งกำหนดตำแหน่งหลังองค์ประกอบแรก
คุณสมบัติ caption-side,
ซึ่งกำหนดตำแหน่งของหัวเรื่องตาราง