เค้าโครง CSS - ลอยและชัดเจน
คุณสมบัติ CSS float
ระบุว่าองค์ประกอบควรลอยอย่างไร
คุณสมบัติ CSS clear
ระบุว่าองค์ประกอบใดสามารถลอยอยู่ข้างองค์ประกอบที่ถูกล้างและด้านใด
ทรัพย์สินลอยน้ำ
คุณสมบัติfloat
นี้ใช้สำหรับวางตำแหน่งและจัดรูปแบบเนื้อหา เช่น ปล่อยให้รูปภาพลอยไปทางซ้ายกับข้อความในคอนเทนเนอร์
คุณสมบัติfloat
สามารถมีค่าใดค่าหนึ่งต่อไปนี้:
-
left
- องค์ประกอบลอยอยู่ทางด้านซ้ายของคอนเทนเนอร์ -
right
- องค์ประกอบลอยไปทางขวาของคอนเทนเนอร์ -
none
- องค์ประกอบไม่ลอย (จะแสดงเฉพาะตำแหน่งที่เกิดขึ้นในข้อความ) นี่คือค่าเริ่มต้น -
inherit
- องค์ประกอบสืบทอดค่าทศนิยมของพาเรนต์
ในการใช้งานที่ง่ายที่สุด สามารถใช้float
คุณสมบัตินี้เพื่อตัดข้อความรอบรูปภาพ
ตัวอย่าง - float: right;
ตัวอย่างต่อไปนี้ระบุว่ารูปภาพควรลอยไปทางขวาในข้อความ:
ความเจ็บปวดคือความรัก ซึ่งเป็นระบบจัดเก็บข้อมูลหลัก Phasellus imperdiet ไม่ใช่และบางครั้งก็พูด แต่ต้องการความเกลียดชัง Maecenas เป็นแฟนตัวยงพยาบาทและไม่ทำอาหารผู้เขียนชีวิตมวลชน
ตัวอย่าง
img {
float: right;
}
ตัวอย่าง - ลอย: ซ้าย;
ตัวอย่างต่อไปนี้ระบุว่ารูปภาพควรลอยไปทางซ้ายในข้อความ:
ความเจ็บปวดคือความรัก ซึ่งเป็นระบบจัดเก็บข้อมูลหลัก Phasellus imperdiet ไม่ใช่และบางครั้งก็พูด แต่ต้องการความเกลียดชัง Maecenas เป็นแฟนตัวยงพยาบาทและไม่ทำอาหารผู้เขียนชีวิตมวลชน
ตัวอย่าง
img {
float: left;
}
ตัวอย่าง - ไม่มีทุ่น
ในตัวอย่างต่อไปนี้ รูปภาพจะแสดงในตำแหน่งที่เกิดในข้อความ (float: none;):
ความเจ็บปวดคือความรัก ซึ่งเป็นระบบจัดเก็บข้อมูลหลัก Phasellus imperdiet ไม่ใช่และบางครั้งก็พูด แต่ต้องการความเกลียดชัง Maecenas เป็นแฟนตัวยงพยาบาทและไม่ทำอาหารผู้เขียนชีวิตมวลชน
ตัวอย่าง
img {
float: none;
}
ตัวอย่าง - ลอยตัวติดกัน
โดยปกติองค์ประกอบ div จะแสดงทับกัน อย่างไรก็ตาม หากเราใช้float: left
เราสามารถปล่อยให้องค์ประกอบลอยติดกันได้:
ตัวอย่าง
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}