CSS Floats อธิบายใน 5 คำถาม

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

โพสต์นี้ครอบคลุมคำถามพื้นฐานห้าข้อที่จะช่วยให้คุณเป็นผู้เชี่ยวชาญในองค์ประกอบแบบลอยตัว.

1. องค์ประกอบใดไม่ลอย?
2. เกิดอะไรขึ้นกับองค์ประกอบเมื่อมันลอย?
3. เกิดอะไรขึ้นกับพี่น้องของ "โฟลต"?
4. เกิดอะไรขึ้นกับผู้ปกครองของ "โฟลต"?
5. คุณจะล้าง "Floats" ได้อย่างไร?

สำหรับผู้อ่านที่เพิ่ม TL; dr เข้าใกล้ชีวิตมีบทสรุปใกล้ถึงจุดสิ้นสุด.

1. องค์ประกอบใดไม่ลอย?

แน่นอน หรือ องค์ประกอบตำแหน่งคงที่ จะไม่ลอย ดังนั้นในครั้งต่อไปที่คุณพบลอยที่ไม่ทำงานให้ตรวจสอบว่ามันลอยอยู่ position: absolute หรือ ตำแหน่ง: ถาวร และใช้การเปลี่ยนแปลงตามนั้น.

2. จะเกิดอะไรขึ้นกับองค์ประกอบเมื่อมันลอย?

เมื่อองค์ประกอบถูกแท็ก "ลอย" มันจะวิ่งไปทางซ้ายหรือขวาโดยพื้นฐานจนกระทั่งมัน กระทบผนังขององค์ประกอบภาชนะ. หรือมันจะทำงานจนกว่ามันจะ ฮิตอีกองค์ประกอบลอยที่มีอยู่ในผนังเดียวกัน. พวกมันจะคอยซ้อนกันไปเรื่อย ๆ จนกว่าพื้นที่จะหมดและคนที่เข้ามาใหม่จะถูกย้ายลงมา.

องค์ประกอบลอยตัว จะไม่ไปอยู่เหนือองค์ประกอบ ก่อน มัน ในโค้ดสิ่งที่คุณต้องพิจารณาก่อนการเข้ารหัส “ลอย” หลังจาก องค์ประกอบทางด้านที่คุณต้องการลอยมัน.

ต่อไปนี้เป็นสองสิ่งที่เกิดขึ้นกับองค์ประกอบแบบลอยขึ้นอยู่กับชนิดขององค์ประกอบที่จะถูกเก็บลอย:

(1) องค์ประกอบแบบอินไลน์จะเปลี่ยนเป็นองค์ประกอบระดับบล็อก เมื่อลอย.

เคยสงสัยบ้างไหมว่าทำไมทันใดนั้นคุณสามารถกำหนดความสูง & ความกว้างให้กับการลอย ระยะ? นั่นเป็นเพราะองค์ประกอบทั้งหมดเมื่อลอยจะได้รับค่า กลุ่ม สำหรับมัน แสดง คุณลักษณะ (อินไลน์ตาราง จะได้รับ ตาราง) ทำให้พวกเขาองค์ประกอบระดับบล็อก.

(2) องค์ประกอบบล็อกของความกว้างที่ไม่ระบุจะหดให้พอดีกับเนื้อหาเมื่อลอย.

โดยปกติเมื่อคุณไม่ได้ระบุความกว้างให้กับองค์ประกอบบล็อกความกว้างของมันคือค่าเริ่มต้น 100% แต่เมื่อลอยก็ไม่มีอีกต่อไป กล่ององค์ประกอบของบล็อกจะหดตัวจนกว่าเนื้อหาจะยังคงมองเห็นได้.

3. เกิดอะไรขึ้นกับพี่น้องของ "โฟลต"?

เมื่อคุณตัดสินใจที่จะลอยองค์ประกอบระหว่างองค์ประกอบหลาย ๆ ชิ้นไม่ต้องกังวลว่ามันจะทำงานอย่างไรพฤติกรรมของมันจะสามารถคาดเดาได้และจะเคลื่อนที่ไปทางซ้ายหรือขวา สิ่งที่คุณควรคำนึงถึงคือ วิธีการที่พี่น้องจะประพฤติตนดี.

"โฟลต" มีพี่น้องที่ห่วงใยและเชื่อฟังมากที่สุดในโลก พวกเขาจะทำทุกอย่างตามอำนาจเพื่อรองรับองค์ประกอบลอย.

องค์ประกอบข้อความและอินไลน์ จะเพียงแค่ หลีกทางให้กับ "Floats" และจะล้อมรอบ "Float" เมื่อมันอยู่ในตำแหน่ง.

องค์ประกอบบล็อก จะไปอีกขั้นและจะ พันรอบ "โฟลต" อย่างใจกว้างแม้ว่ามันจะหมายถึงการเตะลูกองค์ประกอบของตัวเองเพื่อให้มีพื้นที่สำหรับ "ลอย".

ลองดูสิ่งนี้ในการทดสอบ ด้านล่างเป็นกล่องสีน้ำเงินและหลังจากนั้นก็เป็นกล่องสีแดงขนาดเดียวกันกับองค์ประกอบย่อย.

ทีนี้มาลอยกล่องสีฟ้ากันดูว่าเกิดอะไรขึ้นกับกล่องสีแดงกับลูกของมัน.

ทุกอย่างจะเรียบร้อยเมื่อกล่องสีแดงหยุดกอดกล่องสีน้ำเงินและคุณสามารถใช้ ล้น: ซ่อน.

เมื่อคุณเพิ่ม ล้น: ซ่อน องค์ประกอบที่ห่อลอยมันจะหยุดทำเช่นนั้น. ดูวิธีการทำงานของกล่องสีแดงด้านล่าง ล้น: ซ่อน.

4. เกิดอะไรขึ้นกับผู้ปกครองของ "โฟลต"?

พ่อแม่ไม่ค่อยสนใจลูก ๆ ของ "โฟลต" ยกเว้นว่าพวกเขาไม่ควรออกนอกขอบเขตด้านซ้ายหรือด้านขวา.

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

5. วิธีการล้าง "โฟลต"?

ฉันได้พูดไปแล้วโดยใช้ ล้น: ซ่อน เพื่อให้ผู้ปกครองฉลาดสูงรองรับเด็กลอยขณะที่สร้างพื้นที่ที่เหมาะสมสำหรับองค์ประกอบอื่น ๆ หลังจาก "ลอย" และเพื่อหยุดพี่น้องจากการห่อ "ลอย.

และนั่นคือวิธีที่คุณสร้างองค์ประกอบใกล้กับ "โฟลต" โดยไม่มีการประนีประนอม.

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

ชัดเจน: ซ้าย; ชัดเจน: ถูกต้อง; ชัดเจน: ทั้งสอง; 

ซ้าย ค่าจะล้าง "Floats" ทั้งหมดทางด้านซ้ายขององค์ประกอบและในทางกลับกัน ขวา, และทั้งสองด้านสำหรับ ทั้งสอง. นี้ ชัดเจน คุณลักษณะที่สามารถใช้กับพี่น้อง div ว่างหรือองค์ประกอบหลอกตามความสะดวกของคุณ.

สรุป

1. องค์ประกอบแน่นอน / คงที่จะไม่ลอย.
2. "ลอย" ไม่ได้อยู่เหนือองค์ประกอบ ก่อน มันอยู่ในรหัส.
3. หากมีที่ว่างไม่เพียงพอในตู้คอนเทนเนอร์จะมีการกด "Float".
4. "โฟลต" ทั้งหมดถูกสร้างเป็นองค์ประกอบระดับบล็อก.
5. หากไม่ได้ระบุความกว้างใน "โฟลต" มันจะย่อขนาดให้พอดีกับเนื้อหา.
6. พี่น้องในภายหลังของ "โฟลต" จะล้อมรอบพวกเขา (อินไลน์ & ข้อความ) หรือล้อมรอบพวกเขา (บล็อก).
7. หากต้องการหยุดองค์ประกอบจากการตัด "ลอย" ให้ใช้ ล้น: ซ่อน.
8. ผู้ปกครองของ "ลอย" จะไม่เพิ่มความสูงเพื่อให้พอดีกับลอย.
9. ในการทำให้ผู้ปกครองเพิ่มความสูงตาม "ลอย" ให้ใช้ ล้น: ซ่อน (หรือสร้างพี่น้องว่างเปล่าด้วย ชัดเจน หลังจากที่มัน)
10. เพื่อป้องกันองค์ประกอบที่อยู่ใกล้ "โฟลต" ให้ใช้ ชัดเจน คุณลักษณะ.