มาดูข้อเสียของโฟลตกัน องค์ประกอบบล็อกและอินไลน์มีพฤติกรรมซึ่งกันและกันอย่างไรและควรใช้ร่วมกันหรือไม่ ให้เราวิเคราะห์ว่าการสูญเสียคืออะไรและจะจัดการกับมันอย่างไร
แม้ว่าในบทความที่แล้วเราจะสร้างตารางอย่างง่ายสำหรับไซต์โดยใช้การลอย แต่เดิมมีจุดประสงค์เพื่อปรับการไหลขององค์ประกอบในข้อความ Float มีสามความหมาย: ซ้าย - องค์ประกอบติดกับระยะขอบด้านซ้าย ขวา - องค์ประกอบถูกกดไปที่ขอบขวา ไม่มี - โหมดตัดปิดอยู่
องค์ประกอบที่ห่อแบบลอยตัวสามารถปรับขนาดและบุ๋มได้ แต่ถ้าองค์ประกอบอยู่ในบรรทัด องค์ประกอบนั้นจะทำงานเหมือนองค์ประกอบบล็อก
.block1 {
ลอย: ซ้าย;
ความกว้าง: 150px;
}
.block2 {
ลอย: ขวา;
ความกว้าง: 150px;
}
มีปัญหาอีกอย่างเมื่อใช้ทุ่นลอยน้ำซึ่งตกลงมาจากกระแสน้ำ จะปรากฏขึ้นเมื่อบล็อกเรียงต่อกัน แต่มีเพียงหนึ่งบล็อกเท่านั้นที่มีคุณสมบัติลอย จากนั้นบล็อกจะอยู่ด้านบนของส่วนที่เหลือ เพราะไม่เห็นบล็อกอื่น องค์ประกอบแบบอินไลน์จะล้อมรอบองค์ประกอบแบบลอย แต่บล็อกที่มีข้อความนี้จะยังคงอยู่ภายใต้องค์ประกอบแบบลอย
แต่ float โต้ตอบกับ float อย่างไร?
พวกเขาทำตัวเหมือนข้อความ: พวกเขายืนเรียงกันตราบใดที่มีพื้นที่ว่างแล้วย้ายไปขึ้นบรรทัดใหม่ ดังนั้นด้วยความช่วยเหลือของทุ่น เราจึงเริ่มสร้างกริด หากไม่มีที่ว่างพวกเขาจะย้ายเกินความกว้างของไซต์นั่นคือไม่ไปไหน
หากลูกลอยไม่เห็นองค์ประกอบบล็อกธรรมดาๆ ก็สามารถสอนองค์ประกอบบล็อกให้เห็นลูกลอยได้ เราใช้คุณสมบัติที่ชัดเจน ซึ่งปิดใช้งานการห่อจากทุกด้าน (หรือจากตัวเลือกที่เลือก) นั่นคือองค์ประกอบที่มีความชัดเจนจะตกอยู่ภายใต้องค์ประกอบที่มีทุ่น
