การลอยตัวที่ชัดเจนเป็นสิ่งที่ใครๆ ที่ทำเพจจะต้องเจอ แต่ทุกคนจะรู้ชัดเจนและเข้าใจอย่างครอบคลุมได้หรือไม่? ดังนั้นฉันจึงเขียนบทความแบบนี้ทันทีที่มีเวลาว่าง ฉันไม่สามารถครอบคลุมทุกสิ่งได้ แต่โดยพื้นฐานแล้วฉันสามารถสอนทุกคนในสิ่งที่ฉันรู้ได้
มาดูคร่าวๆ ว่ามีกี่วิธีในการล้างโฟลต (ฉันจะไม่เขียนเกี่ยวกับการใช้ Zoom:1 ใน IE แต่ฉันจะเขียนเกี่ยวกับมันในหัวข้อถัดไป) การสาธิต ที่สอดคล้องกัน
- ใช้คลาสหลอก: after เพื่อล้างเลเยอร์หลอกคลาสที่มีความสูงเป็นศูนย์สำหรับการควบคุมว่างในภายหลัง
- ใช้ CSS overflow:auto เพื่อรองรับความสูง
- การใช้ CSS overflow:hidden เพื่อสร้างการดัดแปลงที่แปลกประหลาด
- ใช้ display:table เพื่อเปลี่ยนวัตถุให้เป็นรูปแบบตาราง
- ใช้แท็ก div และแอตทริบิวต์ที่ชัดเจนของ css
- ใช้แท็ก br และแอตทริบิวต์ที่ชัดเจนของ CSS
- ใช้แท็ก br และแอตทริบิวต์ HTML ที่ชัดเจนของตัวเอง
เมื่อมองดูคร่าวๆ พวกเขาทั้งสองสามารถแก้ปัญหาได้ อย่างไรก็ตาม พวกเขามีข้อดีและข้อเสียของตัวเอง (การโต้ตอบแบบตัวต่อตัว)
- ความหมายของโครงสร้าง ความได้เปรียบ นั้นถูกต้องสมบูรณ์และจะไม่มีปัญหาแปลกๆ อื่นๆ เกิดขึ้น
ข้อเสีย วิธีการนำกลับมาใช้ใหม่อย่างไม่เหมาะสมอาจทำให้ปริมาณโค้ดเพิ่มขึ้นอย่างรวดเร็วได้อย่างง่ายดาย
ขอแนะนำ ให้ใช้เมื่อชั้นนอกสุดลอยอยู่เบาๆ หรือสำหรับผู้ที่เข้าใจวิธีการนำกลับมาใช้ซ้ำแบบโมดูลาร์ - ข้อดี : ความหมายโครงสร้างถูกต้องสมบูรณ์และจำนวนโค้ดมีขนาดเล็กมาก
ข้อเสีย : หลังจากการซ้อนหลายครั้ง การคลิกที่กล่องแสงด้านนอกสุดจะทำให้เนื้อหาทั้งหมดจากชั้นนอกสุดถึงชั้นในสุดถูกเลือก (FF) หรือเมื่อการวางเมาส์โอเวอร์ทำให้ความกว้างเปลี่ยนแปลง โมดูลที่อยู่นอกสุดจะมีการเลื่อน บาร์ (IE)
ขอแนะนำ ให้ใช้โมดูลภายในโมดูลเดียว อย่าซ้อนกัน - ข้อดี : ความหมายโครงสร้างถูกต้องสมบูรณ์และจำนวนโค้ดมีขนาดเล็กมาก
ข้อเสีย: เมื่อเนื้อหาเพิ่มขึ้น ง่ายต่อการตัดบรรทัดโดยอัตโนมัติและเนื้อหาจะถูกซ่อน
ขอแนะนำ ให้ใช้เมื่อความกว้างคงที่และไม่ซ้อนกัน - ข้อดี : ความหมายโครงสร้างถูกต้องสมบูรณ์และจำนวนโค้ดมีขนาดเล็กมาก
คุณสมบัติของโมเดลกล่อง ข้อบกพร่อง มีการเปลี่ยนแปลง เป็นไปได้ว่ามีเหตุการณ์แปลก ๆ มากมายเกินกว่าที่คุณจะนับได้
ขอแนะนำว่า หากคุณไม่ต้องการแก้ไขข้อบกพร่องและฆ่าคุณ จะเป็นการดีที่สุดที่จะไม่ใช้งานมัน อย่างไรก็ตาม สามารถใช้เป็นการหลอกลวงชั่วคราวในเวอร์ชันอัลฟ่าสำหรับการทดสอบได้ - ข้อดี: จำนวนโค้ดมีขนาดเล็กมากและสามารถนำกลับมาใช้ซ้ำได้สูงมาก
ข้อเสีย คือไม่สามารถปรับให้เข้ากับความหมายได้อย่างสมบูรณ์แบบ และไม่เอื้อต่อการแก้ไขและการเปลี่ยนแปลงความต้องการ
แนะนำ สำหรับผู้เริ่มต้น ช่วยให้คุณแก้ปัญหาลอยตัวได้อย่างรวดเร็ว - ข้อดี: ระดับของความหมายดีกว่ากรณีที่ห้า จำนวนโค้ดมีขนาดเล็กมากและสามารถนำกลับมาใช้ใหม่ได้สูงมาก
ข้อเสีย: ความหมายยังไม่สมบูรณ์แบบซึ่งไม่เอื้อต่อการแก้ไขและการเปลี่ยนแปลงความต้องการ
แนะนำ สำหรับผู้เริ่มต้น ช่วยให้คุณแก้ปัญหาลอยตัวได้อย่างรวดเร็ว - ข้อดี: ระดับของความหมายดีกว่ากรณีที่ 5 และ 6 จำนวนโค้ดมีน้อยและสามารถนำกลับมาใช้ใหม่ได้สูงมาก
ข้อเสีย: ความหมายยังไม่สมบูรณ์แบบซึ่งไม่เอื้อต่อการแก้ไขและการเปลี่ยนแปลงความต้องการ
ขอแนะนำ ให้ผู้เริ่มต้นใช้มันเมื่ออัพเกรดความคิดของพวกเขา เพื่อให้พวกเขาเข้าใจว่าแทนที่จะใช้ชื่อคลาสในการควบคุมประสิทธิภาพ เป็นการดีกว่าที่จะกลับไปสู่ยุค WEB1.0 ของหน้าเว็บ และใช้แอตทริบิวต์ html โดยตรงเพื่อควบคุมประสิทธิภาพ ท้ายที่สุดแล้วอันหลังก็มีโค้ดน้อยกว่า
ในที่สุดรายการก็เสร็จสมบูรณ์ อย่างไรก็ตาม ฉันคิดว่าจำเป็นต้องขอโทษทุกคนเกี่ยวกับบทความที่ฉันพิมพ์ซ้ำใน Ghost; ฉันเสียใจเป็นอย่างยิ่งที่เปลี่ยนชื่อเรื่อง Ghost จาก "ง่ายที่สุด" เป็น "เหมาะสมที่สุด" ซึ่งทำให้นักเรียนหลายคนเข้าใจผิดในเวลาต่อมา ดังนั้นฉันจึงเขียนบทความใหม่เพื่อแบ่งปันกับคุณ
ข้อความต้นฉบับ: http://webteam.tencent.com/?p=1122
