تخطيط CSS - إصلاح واضح وواضح
خاصية واضحة
عندما نستخدم float
الخاصية ، ونريد العنصر التالي أدناه (ليس على اليمين أو اليسار) ، سيتعين علينا استخدام clear
الخاصية.
تحدد الخاصية ما يجب clear
أن يحدث للعنصر المجاور للعنصر العائم.
يمكن أن تحتوي clear
الخاصية على إحدى القيم التالية:
-
none
- لا يتم دفع العنصر أسفل العناصر العائمة يمينًا أو يسارًا. هذا هو الافتراضي -
left
- يتم دفع العنصر أسفل العناصر العائمة اليسرى -
right
- يتم دفع العنصر أسفل العناصر العائمة اليمنى -
both
- يتم دفع العنصر أسفل كل من العناصر العائمة يمينًا ويسارًا -
inherit
- يرث العنصر القيمة الواضحة من أصله
عند مسح العوامات ، يجب أن تطابق clear مع float: إذا تم تعويم عنصر إلى اليسار ، فيجب عليك مسحه إلى اليسار. سيستمر العنصر العائم في الطفو ، لكن العنصر الذي تم مسحه سيظهر تحته على صفحة الويب.
مثال
هذا المثال يزيل العائمة إلى اليسار. هنا ، هذا يعني أن العنصر <div2> يتم دفعه أسفل عنصر <div1> العائم الأيسر:
div1 {
float: left;
}
div2 {
clear: left;
}
هاك clearfix
إذا كان العنصر العائم أطول من العنصر الذي يحتويه ، فسيتم "تجاوزه" خارج الحاوية الخاصة به. يمكننا بعد ذلك إضافة اختراق clearfix لحل هذه المشكلة:
بدون كليرفكس
مع كليرفكس
مثال
.clearfix {
overflow: auto;
}
The overflow: auto
clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after
pseudo-element in a later chapter.