عند استخدام تخطيط صفحة ويب DivCSS، غالبًا ما يتم استخدام العوامات. هناك العديد من الأشياء الشريرة التي قد تحدث بسبب العوامات. يعد مسح العوامات أمرًا ضروريًا، ويعتبر مسح العوامات من العناصر الأصلية في أي وقت أحد العادات الجيدة في كتابة CSS.
دعونا نلقي نظرة على البرنامج التعليمي اليوم. هذا هو كود المصدر العائم الذي لم يتم مسحه. لا يمكنك رؤية الخلفية الصفراء الفاتحة للعنصر الأصلي عند تشغيل الكود.
مثال لكود المصدر
[www.downcodes.com] <نمط النوع = "نص/CSS">
<!–
*{الهامش:0;الحشو:0;}
الجسم {الخط: 36px لون غامق: #F00؛}
#تخطيط{الخلفية:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#يمين{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
->
</نمط>
<div معرف = "تخطيط">
<div id="left">يسار</div>
<div id="right">يمين</div>
</div>
كما هو موضح في الشكل قبل مسح العوامة:
1. استخدم الملصقات الفارغة لمسح العوامات إحدى الطرق التي استخدمتها لفترة طويلة هي أن العلامة الفارغة يمكن أن تكون علامة div أو علامة P. أنا معتاد على استخدام <P>، وهو قصير بدرجة كافية ويستخدم العديد من الأشخاص أيضًا <hr>، لكنهم يحتاجون فقط إلى مسح الحدود له، ولكن من الناحية النظرية يمكن أن يكون أي علامة. تهدف هذه الطريقة إلى إضافة مثل هذه العلامة لمسح التعويم بعد مسح جميع العناصر العائمة داخل العنصر الأصل العائم، وتحديد رمز CSS لها: واضح: كلاهما. عيب هذا النهج هو إضافة عناصر هيكلية لا معنى لها.
مثال لكود المصدر
[www.downcodes.com] <نمط النوع = "نص/CSS">
<!–
*{الهامش:0;الحشو:0;}
الجسم {الخط: 36px لون غامق: #F00؛}
#تخطيط{الخلفية:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#يمين{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clr{واضح:كلاهما؛}
->
</نمط>
<div معرف = "تخطيط">
<div id="left">يسار</div>
<div id="right">يمين</div>
<p class="clr">
</div>
تعمل هذه الطريقة على حل عيوب الاضطرار إلى إضافة تعليمات برمجية غير مقصودة بشكل فعال عن طريق مسح العوامات من خلال عناصر التسمية الفارغة. لاستخدام هذه الطريقة، ما عليك سوى تحديد خاصية CSS: overflow:auto في العنصر الذي يجب مسحه من العائمة، وهذا كل شيء! "التكبير: 1" مخصص للتوافق مع IE6.
مثال لكود المصدر
[www.downcodes.com] <نمط النوع = "نص/CSS">
<!–
*{الهامش:0;الحشو:0;}
الجسم {الخط: 36px لون غامق: #F00؛}
#layout{background:#FF9;overflow:auto;zoom:1;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#يمين{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
->
</نمط>
<div معرف = "تخطيط">
<div id="left">يسار</div>
<div id="right">يمين</div>
</div>
تنطبق هذه الطريقة فقط على المتصفحات غير التابعة لـ IE. يرجى الرجوع إلى الأمثلة التالية لمعرفة طرق الكتابة المحددة. يرجى الانتباه إلى النقاط التالية أثناء الاستخدام. 1. في هذه الطريقة، يجب تعيين الارتفاع: 0 للكائن الزائف الذي يحتاج إلى مسح العنصر العائم، وإلا فإن العنصر سيكون أعلى بعدة بكسلات من القيمة الفعلية؛ 2. سمة المحتوى ضرورية، ولكن يمكن أن تكون قيمتها مناقشة مثالية فارغة باللون الأزرق في هذه الطريقة، يتم تعيين قيمة سمة المحتوى على "."، لكنني وجدت أنه من الممكن أيضًا تركها فارغة.
مثال لكود المصدر
[www.downcodes.com] <نمط النوع = "نص/CSS">
<!–
*{الهامش:0;الحشو:0;}
الجسم {الخط: 36px لون غامق: #F00؛}
#تخطيط{الخلفية:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#يمين{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
->
</نمط>
<div معرف = "تخطيط">
<div id="left">يسار</div>
<div id="right">يمين</div>
</div>
كما هو موضح في الشكل بعد التعويم الواضح:
ولكل من هذه الطرق الثلاثة مميزات وعيوب، ويجب عليك اختيار الأفضل عند استخدامها، وبالمقارنة فإن الطريقة الثانية هي الأفضل.
