دعنا ننتبه إلى عيوب الطفو. كيف تتصرف عناصر الكتلة والعناصر المضمنة مع بعضها البعض وما إذا كان سيتم استخدامها معًا. دعونا نحلل ما هي الخسارة وكيفية التعامل معها.
على الرغم من حقيقة أننا قمنا في المقالة الأخيرة ببناء شبكة بسيطة للموقع باستخدام العوامات ، إلا أنها تهدف في الأصل إلى ضبط تدفق العناصر في النص. يحتوي Float على ثلاثة معانٍ: يسار - تلتصق العناصر بالهامش الأيسر ؛ يمين - يتم ضغط العناصر على الحافة اليمنى ؛ لا شيء - تم تعطيل وضع الالتفاف.
يمكن تحجيم عنصر التفاف عائم ومبطن ، ولكن إذا كان العنصر مضمنًا ، فسوف يتصرف كعنصر كتلة.
.كتلة 1 {
تعويم: اليسار؛
العرض: 150 بكسل ؛
}
.block2 {
تعويم: صحيح ؛
العرض: 150 بكسل ؛
}
هناك مشكلة أخرى عند استخدام العوامات ، وهي السقوط من التيار. يظهر عندما تسير الكتل الواحدة تلو الأخرى ، ولكن إحداها فقط لها خاصية الطفو ، فستكون فوق البقية ، لأنها لا ترى الكتل الأخرى. ستلتف العناصر المضمنة حول العناصر العائمة ، لكن الكتلة التي تحتوي على هذا النص ستبقى تحت العنصر العائم.
ولكن كيف تتفاعل تعويم مع تعويم؟
يتصرفون مثل النص: يقفون واحدًا تلو الآخر طالما توجد مساحة خالية ، ثم ينتقلون إلى سطر جديد. لذلك ، بمساعدة العوامات ، بدأنا في بناء الشبكات. إذا لم تكن هناك مساحة متبقية ، فسيتم نقلهم إلى ما وراء عرض الموقع ، أي أنهم لا يذهبون إلى أي مكان.
إذا كان الطفو لا يرى عناصر كتلة بسيطة ، فيمكن تعليم عناصر الكتلة لرؤية الطفو. نستخدم الخاصية الشفافة التي تعطل الالتفاف من جميع الجوانب (أو من الجوانب المختارة). وهذا يعني أن العنصر ذي الوضوح يقع تحت العنصر ذي الطفو.
