วิธีการที่ใช้กันทั่วไปสำหรับรูปแบบ CSS: float:none|left|right
ค่า:
ไม่มี:?ค่าเริ่มต้น วัตถุไม่ลอย
ซ้าย: ข้อความไหลไปทางขวาของวัตถุ
ขวา: ข้อความไหลไปทางด้านซ้ายของวัตถุ
วิธีการทำงาน ดูตัวอย่างหนึ่งแถวและสองคอลัมน์
รหัส xhtml:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <div id="ห่อ"> <div id="column1">นี่คือคอลัมน์แรก</div> <div id="column2">นี่คือคอลัมน์ที่สอง</div> <div class="clear"></div> /*สิ่งนี้ขัดต่อจุดประสงค์ของมาตรฐานเว็บ เพียงแต่หมายความว่าองค์ประกอบด้านล่างจำเป็นต้องได้รับการล้าง*/ </div> |
รหัสซีเอสเอส:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: #wrap{ความกว้าง:100;ความสูง:อัตโนมัติ;} #column1{ลอย:ซ้าย;ความกว้าง:40;} #column2{ลอย:ขวา;กว้าง:60;} .clear{ชัดเจน:ทั้งสอง;} |
ตำแหน่ง:คงที่|สัมบูรณ์|คงที่|ญาติ
ค่า:
คงที่:?ค่าเริ่มต้น ไม่มีการวางตำแหน่งพิเศษ วัตถุเป็นไปตามกฎการวางตำแหน่ง HTML
สัมบูรณ์:? ลากวัตถุออกจากการไหลของเอกสารและใช้คุณลักษณะทางซ้าย ขวา บน ล่าง และคุณลักษณะอื่นๆ เพื่อดำเนินการจัดตำแหน่งแบบสัมบูรณ์โดยสัมพันธ์กับวัตถุหลักที่ใกล้ที่สุดด้วยการตั้งค่าตำแหน่งมากที่สุด หากไม่มีวัตถุแม่ดังกล่าว วัตถุเนื้อหาจะถูกนำมาใช้ และน้ำตกของมันถูกกำหนดผ่านแอตทริบิวต์ z-index
แก้ไขแล้ว:?ไม่รองรับ การวางตำแหน่งวัตถุเป็นไปตามวิธีสัมบูรณ์ แต่มีกฎบางอย่างที่ต้องปฏิบัติตาม
สัมพันธ์:?วัตถุไม่สามารถซ้อนกันได้ แต่จะถูกชดเชยในโฟลว์เอกสารปกติตามคุณลักษณะด้านซ้าย ขวา บน ล่าง และคุณลักษณะอื่น ๆ
มันใช้ตัวอย่างของหนึ่งแถวและสองคอลัมน์
รหัส xhtml:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <div id="ห่อ"> <div id="column1">นี่คือคอลัมน์แรก</div> <div id="column2">นี่คือคอลัมน์ที่สอง</div> </div> |