สรุปวิธีการเคลียร์โฟลต (ปิดองค์ประกอบลอย)

หลายๆ คนได้ศึกษาปัญหาการปิดองค์ประกอบลอยตัวแล้ว แต่วิธีแก้ปัญหานั้นแตกต่างกัน และไม่ใช่ทุกวิธีจะสมบูรณ์แบบ การปิดองค์ประกอบลอยตัว (หรือการล้างโฟลต) เป็นปัญหาที่มักพบในการออกแบบมาตรฐานเว็บ ดังนั้น ในที่นี้ ฉันอยากจะสรุปวิธีการที่ใช้กันทั่วไปหลายวิธี และเปรียบเทียบความสะดวกในการใช้งานและสภาพแวดล้อมที่ใช้งานได้ หากคุณมีวิธีที่ดีกว่าโปรดนำมาอภิปราย

กรณีที่ง่ายที่สุดคือเรารวมองค์ประกอบ div ขนาดเล็กที่มีความกว้างคงที่ (เช่น การนำทาง การอ้างอิง ฯลฯ) ไว้ใน div ขนาดใหญ่พร้อมกับเนื้อหาองค์ประกอบอื่นๆ ตัวอย่างเช่น รหัสต่อไปนี้:

<div id="outer">
<div id="inner"> <h2>คอลัมน์</h2> </div>
<h1>เนื้อหาหลัก</h1>
<p>ลอเรม อิปซัม</p>
</div>

เราสามารถตั้งค่าความกว้างได้ (เช่น 20%) สำหรับ "#inner" แต่เนื่องจาก div เป็นองค์ประกอบระดับบล็อก แม้ว่าเราจะตั้งค่าความกว้างก็ตาม เนื้อหาที่อยู่ด้านหลังจึงสามารถแสดงในบรรทัดถัดไปได้เท่านั้น เว้นแต่เราจะตั้งค่าความกว้าง ให้มัน ตั้งค่าคุณสมบัติ float (ลอยไปทางซ้ายหรือลอยไปทางขวา) แล้วปัญหาที่เรากล่าวมาข้างต้นก็จะเกิดขึ้นในเวลานี้

นี่จะไม่เป็นปัญหาหาก "ด้านใน" มีความกว้างและความสูงน้อยกว่า "ด้านนอก"

อย่างไรก็ตาม หากความสูงของ "ด้านใน" เกินความสูงของ "ด้านนอก" ดังนั้นด้านล่างของจะเกินด้านล่างของ "ด้านนอก" เนื่องจากหลังจากที่เราตั้งค่าแอตทริบิวต์ float สำหรับ "#inner" แล้ว ข้อความจะแยกออกจากการไหลของข้อความ และไม่ว่าความกว้างและความสูงจะเปลี่ยนไปอย่างไร "#outer" ก็จะไม่ติดตามการเปลี่ยนแปลง

วิธีแก้ไข:

1) วิธีการแท็กเพิ่มเติม

วิธีแรกและวิธีการที่แนะนำโดย W3C คือการใช้แท็กเพิ่มเติม วิธีนี้คือการเพิ่มแท็กว่างที่ส่วนท้ายของเนื้อหา วิธีการทั่วไปคือการใช้บางอย่างเช่น:
<br style="clear:both;" />

หรือใช้
<div style="clear:both;"></div>

เมธอดนี้บังคับให้คอนเทนเนอร์ภายนอกขยายโดยการเพิ่มองค์ประกอบ HTML อย่างไรก็ตาม วิธีการนี้จะเพิ่มแท็กเพิ่มเติม และทำให้โครงสร้าง HTML ดูกระชับน้อยลง

หมายเหตุ: ฉันพบว่าใน Internet Explorer (ไม่ว่าจะเป็น 6 หรือ 7) <br style="clear:both" /> สามารถล้างองค์ประกอบลอยตัวได้ แต่ไม่สามารถปิดองค์ประกอบลอยตัวได้ ปัญหานี้ไม่มีอยู่ใน Firefox ฉันไม่รู้ว่าทำไม ? -

2) ใช้ after pseudo-class

เพื่อเพิ่มเนื้อหาใหม่ที่ส่วนท้ายของเนื้อหาปัจจุบันที่ระบุโดยใช้ after pseudo-class และการประกาศเนื้อหา วิธีการทั่วไปคือการเพิ่ม "จุด" เนื่องจากมีขนาดเล็กกว่าและสังเกตเห็นได้น้อยกว่า จากนั้นเราใช้มันเพื่อล้างโฟลต (ปิดองค์ประกอบโฟลต) และซ่อนเนื้อหา:
#ด้านนอก:หลัง{
เนื้อหา:".";
ความสูง:0;
การมองเห็น: ซ่อน;
จอแสดงผล: บล็อก;
ชัดเจน:ทั้งสอง;

สิ่งที่แปลกคือ Internet Explorer 6 และต่ำกว่าใน Windows ไม่รองรับ after pseudo-class ใน CSS 2.1 แต่ Internet Explorer ใน Mac สามารถใช้งานได้ตามปกติ ดังนั้นเราจึงต้องจัดการกับ Win/IE แยกกัน ในบรรดาวิธีการต่างๆ มากมายในการแยกแยะระหว่าง Internet Explorer ใน Win และ Mac วิธีที่ใช้บ่อยที่สุดคือ Holly tips โค้ด CSS:
/* รหัสนี้สามารถดูได้โดย IE/Win*/
กฎซีเอสเอส
/*สิ้นสุดการแฮ็ก */

มีความคิดเห็นสองบรรทัดในโค้ดด้านบน และมีเครื่องหมายแบ็กสแลช () ปรากฏที่ท้ายบรรทัดแรก Internet Explorer บน Mac จะคิดว่าความคิดเห็นยังไม่สิ้นสุด ดังนั้นจึงดำเนินต่อไปจนกระทั่ง บรรทัดแรก "*/" ที่สมบูรณ์จะปรากฏขึ้น และอักขระทั้งหมดที่อยู่ตรงกลางถือเป็นความคิดเห็น แต่ IE/Win จะถือว่าเฉพาะบรรทัดแรกและบรรทัดที่สามเป็นความคิดเห็น และบรรทัดตรงกลางเป็นรหัสที่ถูกต้อง สิ่งนี้ทำให้ IE แตกต่างบนแพลตฟอร์มที่แตกต่างกัน

ตามหลักการข้างต้น ในการล้างโฟลตบน IE 6 ใน Windows คุณสามารถใช้รหัสต่อไปนี้:

#นอก {
จอแสดงผล: อินไลน์บล็อก;
-
/* เริ่มต้นการแฮ็กฮอลลี่ */
* html #outer {
ความสูง:1%;
-
#นอก {
จอแสดงผล: บล็อก;
-
/* จบการแฮ็ก */

ป.ล. หากคุณไม่พิจารณาผู้ใช้ IE6/Mac คุณจะต้องเขียน * html #outer {height:1%;} เท่านั้น
นอกจากนี้ ดูเหมือนว่า display:inline-block จะทำงานได้ไม่ดีใน Internet Explorer 7 ดังนั้นใช้เทคนิคการแฮ็กที่สมบูรณ์ที่สุด

3) องค์ประกอบภายนอกแบบลอย วิธีการลอยแบบลอย

นั้นง่ายมาก ซึ่งคือการลอยองค์ประกอบ "ด้านนอก" (ไปทางซ้ายหรือขวา)

อย่างไรก็ตาม ปัญหาอีกประการหนึ่งที่เกิดจากวิธีนี้คือองค์ประกอบถัดไปที่อยู่ติดกับ "ด้านนอก" จะได้รับผลกระทบจาก "ด้านนอก" และตำแหน่งขององค์ประกอบจะเปลี่ยนไป ดังนั้น คุณต้องระมัดระวังเมื่อใช้วิธีนี้ มีตัวเลือกในการลอยองค์ประกอบทั้งหมดบนเพจ และสุดท้ายใช้องค์ประกอบที่มีความหมายที่เหมาะสม (เช่น ส่วนท้าย) เพื่อล้างโฟลต ซึ่งช่วยลดมาร์กอัปที่ไม่จำเป็น แต่การลอยมากเกินไปจะเพิ่มความยากในการจัดวาง

4) ตั้งค่าโอเวอร์โฟลว์เป็นซ่อนหรืออัตโนมัติ

ตั้งค่าโอเวอร์โฟลว์ของแอตทริบิวต์ #outer เป็นซ่อนหรืออัตโนมัติเพื่อล้างข้อมูลโฟล

ต แต่ควรระวังเมื่อใช้โอเวอร์โฟลว์เนื่องจากจะส่งผลต่อประสิทธิภาพของเบราว์เซอร์ นอกจากนี้ การตั้งค่าโอเวอร์โฟลว์เป็นซ่อนหรืออัตโนมัติใน Internet Explorer 6 ก็ไม่สามารถล้างโฟลตได้อย่างมีประสิทธิภาพ (ปิดองค์ประกอบโฟลต) คุณต้องระบุมิติเป็น "ด้านนอก" นั่นคือ ระบุความกว้างหรือความสูง : :
#นอก {
ล้น:อัตโนมัติ;
ความกว้าง:100%;
-

หมายเหตุ: หากคุณต้องการใช้วิธีนี้เพื่อล้างโฟลต (ปิดองค์ประกอบลอย) บน IE5/Mac คุณต้องตั้งค่าแอตทริบิวต์โอเวอร์โฟลว์เป็นซ่อน

เปรียบเทียบและเลือก

วิธีใดในสี่วิธีที่ดีที่สุด ก่อนอื่น ไม่แนะนำให้ใช้ after pseudo-class เมื่อเทียบกับอีก 3 วิธี เคล็ดลับของ Holly นั้นค่อนข้างยุ่งยากและยากที่จะเชี่ยวชาญ เคล็ดลับของ Holly ที่ฉันกล่าวถึงข้างต้นไม่ได้เป็นเพียงปัญหาใน IE/ Win เมื่อ:hover ปรากฏขึ้น มันจะมีปัญหาอื่น ๆ ดังนั้นเราจึงเพิ่มคุณลักษณะเช่น inline-block ซึ่งหมายความว่าวิธีนี้มีความไม่แน่นอนมากขึ้น แนะนำสำหรับผู้ที่ "สะอาด" เกี่ยวกับโค้ดและมีทักษะด้านเทคนิคสูง

จากนั้นอีกสามวิธีก็สามารถพิจารณาได้จริง อย่างไรก็ตาม เมื่อใช้โอเวอร์โฟลว์ อาจมีผลกระทบต่อประสิทธิภาพของเพจ และผลกระทบนี้ไม่แน่นอน วิธีที่ดีที่สุดคือทดสอบเพจของคุณบนเบราว์เซอร์หลายตัว

และสำหรับการใช้แท็กเพิ่มเติมเพื่อล้างโฟลต (องค์ประกอบโฟลตปิด) ถือเป็นแนวทางปฏิบัติ โดย W3C สำหรับว่าจะใช้องค์ประกอบ <br /> หรือ <div></div> ว่าง คุณสามารถเลือกได้ตามความต้องการของคุณเอง (แน่นอนว่าคุณสามารถใช้องค์ประกอบระดับบล็อกอื่น ๆ ได้เช่นกัน) อย่างไรก็ตาม ควรสังเกตว่า <br /> มีประสิทธิภาพ โดยจะมีตัวแบ่งบรรทัดเพิ่มเติม ดังนั้นจึงต้องตั้งค่าความสูงเป็น 0 เพื่อซ่อนประสิทธิภาพ ดังนั้นในกรณีส่วนใหญ่ การใช้ <div> ที่ว่างเปล่าจะเหมาะสมกว่า

Float-in-float ก็เป็นตัวเลือกที่ดีเช่นกัน เพียงเพิ่มเลเยอร์ <div> ให้กับเลเยอร์ด้านนอกขององค์ประกอบที่คุณต้องการล้างข้อมูลและตั้งค่าแอตทริบิวต์ load:left แต่ให้ใส่ใจกับการเปลี่ยนแปลงในองค์ประกอบที่อยู่ติดกัน