คุณสมบัติ 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,
ซึ่งกำหนดตำแหน่งของหัวเรื่องตาราง