มาดูการออกแบบตารางของไซต์และแยกส่วนประกอบแต่ละส่วน มาสำรวจกันว่าทำไม float ถึงมีประโยชน์มาก เช่นเดียวกับเทคนิคยอดนิยมสำหรับการสร้างตารางเว็บแรกจากสามสตรีมและส่วนท้ายของไซต์
หากต้องการศึกษาการสร้างตารางของไซต์ คุณต้องเข้าใจว่า "โฟลว์" คืออะไร โฟลว์เป็นองค์ประกอบของไซต์ที่อยู่ติดกัน ตัวอย่างเช่น สิ่งเหล่านี้อาจเป็นองค์ประกอบ div ที่เรียงต่อกันโดยค่าเริ่มต้น แต่การไหลสามารถจัดเรียงใหม่ได้ และตำแหน่งขององค์ประกอบบล็อกสามารถเปลี่ยนแปลงได้
ในการควบคุมการไหล เราใช้คุณสมบัติ float ซึ่งสามารถวางบล็อกไว้ทางด้านซ้ายหรือด้านขวา เพียงพอที่จะเขียนในไฟล์ CSS:
"ชื่อคลาสหรือบล็อก" {ลอย: ขวา / ซ้าย; }
ข้อเสียเปรียบเพียงอย่างเดียวของการลอยคือความสามารถในการ "ทับซ้อน" บล็อกหนึ่งบนอีกบล็อกหนึ่ง
เพื่อหลีกเลี่ยงการวิ่งทับ เราใช้ clear: ทั้งคู่ - คุณสมบัตินี้จะกำหนดโฟลว์รอบๆ บล็อก เรากำหนดความกว้างและความสูงเป็นค่าสูงสุดและต่ำสุด เพื่อให้ค่าเป็นไปตามขนาดของเนื้อหา (ข้อความ รูปภาพ) ระยะขอบ - ตั้งค่าเป็นอัตโนมัติเพื่อให้ระยะขอบภายนอกเกิดขึ้นโดยอัตโนมัติขึ้นอยู่กับตำแหน่งของบล็อก
เนื่องจาก float สามารถวางบล็อคได้สองทิศทาง จึงเป็นเรื่องปกติที่จะแบ่งไซต์ออกเป็นสตรีม - ซ้ายและขวา หากโปรแกรมเมอร์ต้องการเพียงสองสตรีม เขาจะปล่อยให้ลอยซ้ายและขวา แต่ถ้ามีมากกว่าสองสตรีม เขาจะปรับระยะขอบโดยใช้ระยะขอบ สิ่งนี้เกิดขึ้นได้อย่างไร:
.column1 {ลอย: ซ้าย; ความกว้าง: 65px; ความสูงขั้นต่ำ: 50px; ระยะขอบขวา: 9px; // 9px จากกล่องกลาง}
2 สตรีม:
.column2 {ลอย: ซ้าย; // ไปยังบล็อกด้านซ้าย แต่ไม่มี "ทับซ้อนกัน" เนื่องจากเราใช้ความกว้างของระยะขอบ: 80px; ความสูงขั้นต่ำ: 50px; }
3 สตรีม:
.column3 {ลอย: ขวา; ความกว้าง: 65px; ความสูงขั้นต่ำ: 50px; }
การจัดการกับส่วนท้าย (.footer):
.footer {ชัดเจน: ทั้งสอง; // พันรอบทั้งสองข้าง}
นี่คือวิธีที่เราทำกริดสำหรับไซต์โดยใช้ float ซึ่งประกอบด้วยสามสตรีม
