ตามข้อกำหนดของ CSS การลอยจะถูกย้ายออกจากโฟลว์เอกสาร และไม่ส่งผลกระทบต่อเลย์เอาต์ของกล่องบล็อก แต่จะมีเพียงการจัดเรียงกล่องอินไลน์เท่านั้น (โดยปกติจะเป็นข้อความ) ดังนั้น เมื่อความสูงเกินคอนเทนเนอร์ที่บรรจุ คอนเทนเนอร์หลักทั่วไปจะไม่ยืดออกโดยอัตโนมัติเพื่อปิดองค์ประกอบลอย แต่บางครั้งเราต้องการพฤติกรรมการปิดอัตโนมัตินี้
วิธีหนึ่งในการทำเช่นนี้คือการแทรกป้ายกำกับเพิ่มเติมลงในคอนเทนเนอร์หลัก และทำให้ชัดเจนในการขยายคอนเทนเนอร์หลัก วิธีนี้มีความเข้ากันได้ของเบราว์เซอร์ที่ดีและไม่มีปัญหา ข้อเสียคือต้องใช้แท็กเพิ่มเติม (และมักจะไม่มีความหมาย) ดังนั้นฉันจึงไม่ชอบมันเป็นการส่วนตัว
ต่อมา มีวิธีใหม่ โดยใช้ :after คลาสหลอกเพื่อฝังองค์ประกอบแบบไดนามิกสำหรับการล้างโฟลต วิธีนี้มีหลักการเดียวกันกับวิธีก่อนหน้า ยกเว้นว่าเนื้อหาพิเศษจะถูกสร้างขึ้นด้วย CSS แต่ถือว่า IE ไม่มี support :หลังจากนั้นและต้องทำแฮ็คเยอะมาก วิธีนี้มีความเข้ากันได้ทั่วไป แต่สามารถจัดการกับเบราว์เซอร์ที่แตกต่างกันผ่านการแฮ็กต่างๆ ขณะเดียวกันก็มั่นใจได้ว่า html นั้นค่อนข้างสะอาดดังนั้นจึงยังคงใช้บ่อยกว่า
ต่อมา มีคนค้นพบว่าการตั้งค่าโอเวอร์โฟลว์ของคอนเทนเนอร์หลักเป็นค่าอื่นที่ไม่ใช่ค่าที่มองเห็นได้สามารถปิดองค์ประกอบลอยตัวในเบราว์เซอร์ที่เป็นไปตามมาตรฐานได้ โดยธรรมชาติแล้ว IE จะไม่รองรับ ดังนั้นวิธีนี้จึงใช้ได้เท่ากับวิธีก่อนหน้า ทำการประมวลผลที่แตกต่างกัน (รูปแบบการทริกเกอร์โดยเฉพาะ) ข้อแตกต่างคือโอเวอร์โฟลว์ไม่ลำบากเท่ากับ :after คลาสหลอก นอกจากนี้ยังมีข้อบกพร่องเล็กน้อยอาจทำให้เกิดข้อขัดแย้งเล็กน้อย
ก่อนที่จะใช้โอเวอร์โฟลว์ มีวิธีอื่นในการใช้ float ซึ่งทำให้คอนเทนเนอร์หลักลอย สิ่งนี้ใช้ประโยชน์จากคุณลักษณะขององค์ประกอบลอยตัว - องค์ประกอบลอยตัวจะปิดองค์ประกอบลอยตัว วิธีการนี้ให้ผลลัพธ์ที่ดีใน IE/Win และเบราว์เซอร์ที่รองรับมาตรฐาน แต่ข้อเสียก็ชัดเจนเช่นกัน - คอนเทนเนอร์หลักอาจไม่ลอยเพียงเพราะต้องการลอย ท้ายที่สุดแล้ว การลอยเป็นพฤติกรรมพิเศษ และบางครั้งเลย์เอาต์ก็ไม่เป็นเช่นนั้น ถูกต้องครับ ปล่อยให้ลอยได้ก็เป็นเรื่องปกติ แม้ว่าองค์ประกอบ float จะสามารถปิดได้ใน IE และเบราว์เซอร์ที่เป็นไปตามมาตรฐาน แต่หลักการจะแตกต่างออกไป ใน IE/Win เค้าโครงทริกเกอร์แบบลอยจึงปิดในเบราว์เซอร์ที่เป็นไปตามมาตรฐาน จริงๆ แล้ว float จะเหมือนกับเบราว์เซอร์ก่อนหน้า หลักการล้นในวิธีนี้จะเหมือนกัน ส่งผลให้เกิด "ช่วงการจัดรูปแบบระดับบล็อก" ซึ่งเป็นปรากฏการณ์ที่กล่าวถึงในข้อกำหนด CSS มักจะมีความเป็นอิสระบางประการคือมันจะปิดโฟลตภายในโดยอัตโนมัติ . องค์ประกอบ.
ตามข้อกำหนด องค์ประกอบประเภทต่อไปนี้จะส่งผลให้เกิดขอบเขตการจัดรูปแบบระดับบล็อก:
● องค์ประกอบแบบลอยสามารถเป็นได้ทั้งทางซ้ายหรือขวา
● องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน
● องค์ประกอบบล็อกแบบอินไลน์ แต่ตุ๊กแกนี้ไม่รองรับในขณะนี้
● องค์ประกอบประเภทเซลล์ตาราง ที่จริงแล้ว ตาราง กลุ่มหัวตาราง แถวของตาราง ฯลฯ ก็เป็นที่ยอมรับเช่นกัน เช่นเดียวกับตารางอินไลน์ (ไม่รองรับโดยตุ๊กแก) เนื่องจากองค์ประกอบเหล่านี้ทั้งหมดสร้างตารางที่ไม่ระบุชื่อทางอ้อม เซลล์
● โอเวอร์โฟลว์เป็นองค์ประกอบที่ไม่สามารถมองเห็นค่าได้
ดังนั้นปรากฎว่าในเบราว์เซอร์ที่รองรับมาตรฐาน เราสามารถมีวิธีการมากมายในการปิดองค์ประกอบลอยตัว และจำเป็นต้องใช้ CSS เท่านั้น ไม่ต้องการสิ่งอื่นใดอีก อย่างไรก็ตาม นอกเหนือจากการล้นแล้ว สิ่งที่กล่าวข้างต้นยังมีผลเพิ่มเติมในการลดความกว้างของคอนเทนเนอร์หลักโดยอัตโนมัติ
สำหรับ IE/Win นั้น มีระบบของตัวเอง ซึ่งก็คือ องค์ประกอบที่มีโครงร่าง จะปิดองค์ประกอบลอยตัวโดยอัตโนมัติ มาดูคุณสมบัติ CSS ที่เรียกใช้โครงร่างกัน คุณจะพบว่ามีความคล้ายคลึงกันมากมายกับการจัดรูปแบบระดับบล็อก ช่วงด้านบน :
● องค์ประกอบลอยตัว ● องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน ● จอแสดงผล: อินไลน์บล็อก
● ซูม
● ความกว้าง/ความสูง
● overflow/overflow-x/overflow-y [ใหม่ใน IE7]
● สูงสุด/ต่ำสุด-ความกว้าง/ความสูง [ใหม่ใน IE7]
จากที่กล่าวมาข้างต้น มีหลายวิธีในการปิดองค์ประกอบลอยตัวใน IE และโดยธรรมชาติแล้ว องค์ประกอบเหล่านี้ล้วนมีข้อจำกัด
อีกสิ่งหนึ่งที่ควรกล่าวถึงคือ display:inline-block คุณลักษณะนี้ไม่มีประโยชน์กับ IE ผลกระทบที่แท้จริงคือเพียงการเพิ่มเลย์เอาต์ให้กับองค์ประกอบอย่างลับๆ อย่างไรก็ตาม เบราว์เซอร์ที่ตรงตามมาตรฐานจะรับรู้คุณลักษณะนี้ ดังนั้นจึงไม่มีผลกระทบต่อสิ่งเหล่านี้ สำหรับเบราว์เซอร์ คุณต้องตั้งค่าการแสดงผลกลับเป็นค่าเริ่มต้น มีข้อบกพร่องใน IE ที่นี่ หากคุณกำหนด display:inline-block ก่อน จากนั้นตั้งค่าการแสดงผลกลับเป็นบล็อก (จอแสดงผลทั้งสองนี้จะต้องวางในคำสั่ง CSS สองคำสั่งต่อกันเพื่อให้มีผล) จากนั้นเค้าโครงจะ ไม่หายไป และในขณะเดียวกัน เค้าโครงก็จะไม่หายไป โดยจะไม่ส่งผลกระทบต่อเบราว์เซอร์อื่นๆ ดังนั้น ในตอนนี้ นี่เป็นวิธีที่ดีในการทริกเกอร์เค้าโครง:
| .gainlayout {จอแสดงผล: อินไลน์บล็อก;} .gainlayout{จอแสดงผล:บล็อก;} |
ดังนั้นจึงมีหลายวิธีในการปิดองค์ประกอบแบบลอยตัวในเบราว์เซอร์ วิธีใช้คุณสมบัติ CSS เหล่านี้ร่วมกันจำเป็นต้องมีการวิเคราะห์สถานการณ์เฉพาะอย่างละเอียด นอกจากนี้ยังจำเป็นต้องใช้ความคิดเห็นแบบมีเงื่อนไขหากไม่ได้ผลจริงๆ เราก็ไปกันได้ กลับมาใช้ใสก็ใช้ได้