float คุณสมบัติระบุหรือไม่ว่าเป็นองค์ประกอบที่ควรลอย
clear ทรัพย์สินที่ใช้ในการควบคุมการทำงานขององค์ประกอบลอย
ลอยทรัพย์สิน
ในการใช้งานที่ง่ายที่สุดที่ float คุณสมบัติสามารถใช้ในการตัดข้อความรอบภาพ
ตัวอย่างต่อไปนี้ระบุว่าภาพที่ควรจะลอยไปทางขวาในข้อความ:
clear ทรัพย์สิน
clear ทรัพย์สินที่ใช้ในการควบคุมการทำงานขององค์ประกอบลอย
องค์ประกอบหลังจากองค์ประกอบลอยจะไหลอยู่รอบ ๆ เพื่อหลีกเลี่ยงนี้ใช้ clear คุณสมบัติ
clear คุณสมบัติที่ระบุด้านขององค์ประกอบองค์ประกอบลอยไม่ได้รับอนุญาตให้ลอย:
clearfix Hack - overflow: auto;
หากเป็นองค์ประกอบสูงกว่าองค์ประกอบที่มีมันและมันจะลอยก็จะล้นด้านนอกของภาชนะที่ใช้บรรจุ
จากนั้นเราก็สามารถเพิ่ม overflow: auto; ไปยังองค์ประกอบที่มีการแก้ไขปัญหานี้:
เว็บตัวอย่างเค้าโครง
มันเป็นเรื่องธรรมดาที่จะทำรูปแบบเว็บทั้งหมดโดยใช้ float ทรัพย์สิน:
ตัวอย่าง
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} ลองตัวเอง» 
ตัวอย่างเพิ่มเติม
เป็นภาพที่มีเส้นขอบและอัตรากำไรที่ลอยไปทางขวาในย่อหน้า
ปล่อยให้ลอยไปทางขวาของภาพในย่อหน้า เพิ่มเส้นขอบและอัตรากำไรที่ไปยังภาพที่
เป็นภาพที่มีคำอธิบายที่ลอยไปทางด้านขวา
ให้ภาพที่มีคำบรรยายใต้ภาพลอยไปทางด้านขวา
ให้อักษรตัวแรกของลอยวรรคไปทางซ้าย
ให้อักษรตัวแรกของลอยวรรคไปทางซ้ายและรูปแบบตัวอักษร
การสร้างเมนูแนวนอน
ใช้ลอยกับรายการของเชื่อมโยงหลายมิติเพื่อสร้างเมนูแนวนอน
การสร้างหน้าแรกของตารางโดยไม่ต้อง
ใช้ลอยในการสร้างหน้าแรกที่มีส่วนหัวส่วนท้ายเนื้อหาซ้ายและเนื้อหาหลัก
คุณสมบัติทั้งหมด CSS ลอย
| คุณสมบัติ | ลักษณะ |
|---|---|
| clear | ระบุที่ด้านข้างขององค์ประกอบที่องค์ประกอบลอยไม่ได้รับอนุญาตให้ลอย |
| float | ระบุหรือไม่ว่าเป็นองค์ประกอบที่ควรลอย |
| overflow | ระบุสิ่งที่เกิดขึ้นหากเนื้อหาล้นกล่ององค์ประกอบของ |
| overflow-x | ระบุว่าจะทำอย่างไรกับขอบด้านซ้าย / ขวาของเนื้อหาถ้ามันล้นพื้นที่เนื้อหาขององค์ประกอบ |
| overflow-y | ระบุว่าจะทำอย่างไรกับด้านบนขอบ / ด้านล่างของเนื้อหาถ้ามันล้นพื้นที่เนื้อหาขององค์ประกอบ |