ในช่วงสองเดือนที่ผ่านมา ฉันทำงานเป็นศิลปินในเว็บไซต์หลายแห่งเป็นระยะๆ ในระหว่างนี้ ฉันได้รับความเข้าใจที่ดีขึ้นเกี่ยวกับการพัฒนามาตรฐานของ DIV+Css มีสองสิ่งที่ทำให้ฉันได้รับมากที่สุด หนึ่งคือ ฉันเข้าใจ CSS Box Model อย่างถ่องแท้ และอีกอย่างคือ ฉันได้แก้ไขปัญหา "องค์ประกอบลอยตัวแบบปิด" ที่สร้างปัญหาให้ฉันมาเป็นเวลานาน:
โดยทั่วไป หากองค์ประกอบลูกใช้ float องค์ประกอบหลักจะไม่สามารถทราบได้อย่างแน่ชัดว่าองค์ประกอบย่อยสิ้นสุดที่ใด ดังนั้นขอบด้านล่างขององค์ประกอบหลักจะผ่านตรงกลางหรือด้านบนขององค์ประกอบย่อยเสมอ ซึ่งทำให้ดูอึดอัดมาก
ในตอนแรก ฉันเพิ่ม <br /> หรือ <div></div> หลังองค์ประกอบย่อยและตั้งค่าแอตทริบิวต์เป็น "clear:all;" แต่การดำเนินการนี้ต้องใช้พื้นที่ว่างจำนวนมากซึ่งไร้ประโยชน์ และแม้แต่บางเว็บไซต์ จำเป็นต้องแก้ไขโค้ด ASP เพื่อเพิ่มแท็กว่างเหล่านี้โดยอัตโนมัติ ซึ่งถือเป็นทางเลือกสุดท้ายเท่านั้น
ต่อมาฉันพบว่าเมื่อแท็กพาเรนต์ถูกตั้งค่าให้ลอยด้วย ก็สามารถปิดในตำแหน่งที่ถูกต้องได้ ดังนั้นฉันจึงลอยแท็กพาเรนต์ได้อย่างง่ายดาย ด้วยวิธีนี้ โค้ด ASP จำนวนมากจึงไม่จำเป็นต้องเปลี่ยนแปลง จำเป็นต้องเพิ่มแอตทริบิวต์ Clear หากไม่สามารถเพิ่มแท็กว่างจากเทมเพลตได้ แต่จำเป็นต้องเพิ่มจากโค้ด ASP ไม่จำเป็นต้องเปลี่ยนโค้ด ASP คุณจะต้องตั้งค่าคอนเทนเนอร์หลักให้ลอยตัวเท่านั้น ยังคงต้องเปลี่ยน ASP จากนั้นเปลี่ยนการตั้งค่าคอนเทนเนอร์หลักให้ลอยและลอยทีละชั้นจะช่วยแก้ปัญหาได้เสมอ แม้ว่าสิ่งนี้จะช่วยประหยัดปัญหาได้มาก แต่ก็สามารถทำให้ทั้งหน้าเต็มไปด้วยองค์ประกอบลอยตัวได้อย่างง่ายดาย -_-!!! ถือได้ว่าเป็นกลยุทธ์ระดับกลางเท่านั้น
ต่อมา เมื่อฉันค้นหาสิ่งอื่นบนอินเทอร์เน็ต ฉันบังเอิญพบคนที่บอกว่าการเพิ่มคุณสมบัติสองรายการต่อไปนี้ในคุณสมบัติ CSS ของคอนเทนเนอร์หลักจะช่วยแก้ปัญหาได้:
ล้น: อัตโนมัติ;
_ความสูง: 1%;
ฉันลองแล้วและใช้งานได้ดีจริงๆ ด้วยวิธีนี้ นี่ควรถือเป็นวิธีที่ดีที่สุดในการแก้ปัญหานี้ในปัจจุบัน: ไม่จำเป็นต้องแก้ไขงานของเพจ และโดยพื้นฐานแล้วไม่จำเป็นต้องแก้ไขพาเรนต์ คอนเทนเนอร์ - แม้แต่คอนเทนเนอร์หลักของคอนเทนเนอร์หลัก หากคุณทำการเปลี่ยนแปลงใดๆ เพียงเพิ่มแอตทริบิวต์ที่ไม่แยแสสองรายการลงในคอนเทนเนอร์หลัก เท่านี้ก็เสร็จสิ้น