فهم خاصية مسح CSS

كانت الخاصية CSS الصافية جزءًا من CSS منذ CSS1. يتيح لك تحديد العناصر التي يمكن أن تطفو بجانب العنصر الممسوح وعلى أي جانب (جوانب). الخاصية clear له خمس قيم محتملة:

كيفية استخدام خاصية مسح المغلق

الطريقة الأكثر شيوعًا لاستخدام الخاصية clear هي بعد استخدام خاصية Float على عنصر. فمثلا:

نص بجانب صورتي.

النص الموجود أسفل صورتي.

جميع العناصر الافتراضية واضحة: لا شيء ؛ لذلك إذا كنت لا تريد أن تطفو عناصر أخرى بجانب شيء ما ، فيجب عليك تغيير النمط الواضح.

عندما تقوم بتطهير العوامات ، فإنك تتطابق بشكل واضح مع عوامة الخاص بك. لذا ، إذا طرحت العنصر إلى اليسار ، فيجب عليك مسحه إلى اليسار. سيستمر العنصر المتحرك في التعويم ، ولكن سيظهر العنصر الذي تم مسحه وكل شيء بعده أسفله في صفحة الويب.

إذا كان لديك عناصر يتم تعويمها إلى اليمين واليسار ، يمكنك مسح جانب واحد فقط أو يمكنك مسح كليهما.

باستخدام واضحة في تخطيطات

والطريقة الأكثر شيوعًا لاستخدام معظم المصممين للملكية الواضحة هي تخطيط عناصر الصفحة . قد يكون لديك صورة تطفو داخل كتلة نصية وتريد أن تبدأ الفقرة التالية أسفل الصورة ، أو قد يكون لديك عمود كامل من النص تريد أن تطفو بجانب مجموعة أخرى من النص ، مع ظهور بعض النص أدناه.

هنا هو HTML لتخطيط في هذا النموذج.

يحتوي على حاوية div واحدة تحمل آخر التي يتم تعويم إلى اليسار.



A div divated قصيرة



محتويات داخل div الحاوية التي ستكون على يمين div divated.

هذا سوف يعمل بشكل جيد ، مع div أقصر عائم إلى يسار باقي محتويات div الأساسي.

يمكنك مسح النص المجاور للصندوق العائم عن طريق إضافة علامة حيث تريد أن تبدأ الكتابة تحت المربع العائم.

لكن المشكلة تأتي عندما يكون المربع العائم أطول من المحتويات المجاورة له. ثم ، كما ترون ، لا يتم ترحيل لون خلفية مربع الرئيسي إلى أسفل مربع floated.

لحسن الحظ ، هناك طريقة سهلة لإصلاح هذا: العقار. عن طريق تحديد المربع الرئيسي لتجاوز: auto؛ سيبقى لون الخلفية بجانب المربع الأطول العائم إلى الأسفل ، كما هو موضح في هذا المثال .