تخطيط CSS - clear و clearfix
- الصفحة السابقة الغرق CSS
- الصفحة التالية مثال على الانسياب في CSS
خصوصية clear
clear تحدد الخاصية أي عناصر يمكن أن تطفو بجانب العنصر المزيل للفوطة وأي جانب.
clear يمكن تعيين الخاصية إلى أحد القيم التالية:
- none - يسمح بوجود عناصر فوطة على الجانب الأيسر والأيمن. القيمة الافتراضية
- left - لا يسمح بوجود عناصر فوطة على الجانب الأيسر
- right - لا يسمح بوجود عناصر فوطة على الجانب الأيمن
- both - لا يسمح بوجود عناصر فوطة على الجانب الأيسر أو الأيمن
- inherit - يستمر العنصر في التوريث قيمة clear من родية
استخدام clear أكثر استخدامات الخاصية هي على العنصر الذي تم استخدامه float بعد الخاصية.
عند إزالة الفوطة، يجب التطابق بين الفوطة والفوطة: إذا تطفو عنصر إلى اليسار، يجب إزالة اليسار. سيستمر العنصر الفوطة في التطفو، ولكن العنصر الذي تم إزالته سيظهر أسفله.
في المثال التالي سيتم إزالة الفوطة إلى اليسار. مما يعني أن لا يسمح بوجود عناصر فوطة على الجانب الأيسر من (div):
مثال
div {
clear: left;
}
هACK clearfix
إذا كان عنصرًا أعلى من العنصر الذي يحتوي عليه، وكان يطفو، فإنه سيتم "الإفراج" عنه خارج صندوقه:
ثم يمكننا إضافة overflow: auto; إلى العنصر المضمن، لحل هذه المشكلة:
مثال
.clearfix {
overflow: auto;
}
إذا كان يمكنك التحكم في الهوامش الخارجية والداخلية (إلا قد ترى شريط التمرير)، فإن overflow: auto clearfix سيعمل بشكل جيد. ولكن، تقنيةclearfix الحديثة الجديدة أكثر أماناً، والكود التالي تم تطبيقه في معظم المواقع:
مثال
.clearfix::after {
content: "";
clear: both;
display: table;
}
سوف تتعلم عن ذلك في الفصول القادمة ::after الرمز المزيف.
- الصفحة السابقة الغرق CSS
- الصفحة التالية مثال على الانسياب في CSS
