فهم دور "clear:both" في CSS

عندما تحتوي صفحة الويب على عناصر عائمة إلى اليسار أو اليمين، يمكن ذلك تسبب تدفق العناصر اللاحقة من حولهم. لمنع ذلك، يوفر CSS الخاصية "clear"، والتي يمكن تعيينها على جانب معين (يسار، يمين) أو إلى "كلاهما".

ما فائدة "clear:كلاهما" ?

يوجه "clear:both" العنصر إلى الأسفل أسفل أي عناصر سابقة تم تعويمها يمينًا ويسارًا. وهذا يسمح لها بالبدء في سطر جديد، مع مسح أي هوامش أو حشوة قد تلتف حول العناصر العائمة.

كيف يعمل "clear:كلاهما"؟

في التدفق العادي للمستند، يتم تكديس العناصر عموديًا، مع تدفق المحتوى حولها. ومع ذلك، عندما يتم تعويم عنصر ما، فإنه يتحرك إما إلى اليسار أو اليمين، مما يسمح للمحتوى الآخر بالتدفق أسفله. "clear:both" يخبر العنصر الحالي بالبدء أسفل أي عناصر عائمة مسبقًا على كلا الجانبين.

مثال للاستخدام

ضع في اعتبارك كود HTML التالي:

في هذا المثال، يتم تحريك div "العائم الأيسر" إلى اليسار، مما يؤدي إلى التفاف النص "هذه فقرة" حوله. يتم بعد ذلك استخدام div "مسح كلا" لمسح الجانبين الأيسر والأيمن، مما يسمح للنص "هذه فقرة جديدة" بالظهور أسفلها في سطر جديد.
الاستنتاج 
من خلال تعيين "clear:both" على عنصر ما، يمكنك التأكد من أنه يبدأ في سطر جديد أسفل أي عناصر عائمة مسبقًا، مما يضمن تخطيطًا متسقًا ومتحكمًا فيه.