بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الخاصية float : هي خاصية تجعل العنصر يطفو إلى جهة اليمين أو جهة اليسار، وهي تأخذ القيمة right أو left أو none ، والقيمة الأخيرة تستخدم لإلغاء الطفو في حالة وجوده ، وتجدر الإشارة إلى أن العناصر من النوع block عندما تطفو تتحول إلى inline مع المحافظة على خصائص block ، وهو ما اصطلحنا عليه سابقا ب inline-block ، كما أن العناصر التي تأتي بعد العناصر الطافية تتأثر هي الأخرى وإن لم تكن معنية مباشرة بالطفو.
سنبدأ أولا بالتعرف على الخاصية وسنجرب على الكود التالي:
أولا سنعطي تنسيقات عادية وهذه هي مع النتيجة:
الآن سنجعل البلوك الأحمر يطفو إلى جهة اليمين والأصفر يطفو جهة اليسار ، والعناصر داخل اللائحة أيضا سنجعلها تطفو إلى جهة اليسار:
وهذه النتيجة:
كما ترى نجحنا في جعل العناصر تطفو إلى الجهات التي حددناها ، كما أن العناصر li أصبحت خطية ، لكن ماذا لو أردنا أن لا تبقى القائمة ul في وضعها هذا بين البلوكين ، ماذا لو أردنا ظهورها أسفل البلوكين ، قد يقول قائل : لنقم بإلغاء خاصية float بالنسبة للعناصر li ، سنزيلها تماما وسنرى النتيجة:
المشكلة لا تزال قائمة كما تلاحظ ، وذلك من تأثير طفو البلوكين وهذا ما تكلمت عنه في أول الدرس ، ولمعالجة هذا المشكل سنحتاج إلى خاصية أخرى.
الخاصية clear : وظيفتها تنظيف آثار الطفو ، وتأخذ القيمة right إذا كان الطفو إلى اليمين أو left إذا كان الطفو إلى اليسار أو both وهذه الأخيرة تنظف آثار الطفو من الجهتين وهي التي تستخدم عادة.
وكما ترى عادت القائمة إلى الوضع الطبيعي.
سنجرب مثال آخر ، صورة مع نص :
سنبدأ بإعطاء تنسيقات عادية ثم نطبق قاعدة الطفو على الصورة ، وطبعا النص سيتبع الصورة إلى اتجاه الطفو ، هذا أساسي وعرفناه منذ قليل:
لاحظ أننا لم نحدد ارتفاعا للديف article وتركنا المحتوى يحدده وسنعرف لماذا بعد قليل ، وهذه هي النتيجة:
كما هو واضح تأثر النص بطفو الصورة ، ولو استخدمنا الخاصية clear مع النص وأعطيناها القيمة left أو both سيعود النص إلى وضعه الطبيعي أسفل الصورة ، وهذا سبق أن جربنله في المثال الماضي ، ما سنقوم به الآن هو جعل النص يطفو هو الآخر لكن إلى جهة اليمين هذه المرة ونحدد له عرضا :
والنتيجة هي كالتالي:
لأننا لم نحدد ارتفاعا محددا للديف الذي يحتوي على العناصر الطافية حدثت هذه المشكلة ، تأثرت الخلفية وكذلك الحدود ، ولحل هذه المشكلة سنستخدم خاصية أخرى هي overflow وسنعطيها القيمة hidden:
والنتيجة هي كالتالي:
الخاصية overflow : تستخدم لحل بعض المشاكل من بينها تأثيرات الطفو ، وتأخذ القيمة hidden أو scroll ، مثلا عندما تكون أبعاد المحتوى أكبر من أبعاد العنصر الذي يحتويه نستخدم الخاصية لتحديد كيفية ظهور هذا المحتوى ، فإذا استخدمنا hidden فإن المحتوى الزائد لا يظهر، وإذا استخدمنا scroll أمكن ظهور كل المحتوى وتصفحه عن طريق أزرار scrolling .
سنجرب القيمة scroll في المثال التالي:
سنعطي للديف container أبعادا قليلة بالمقارنة مع النص ، ومن تم نستخدم الخاصية ونعطيها القيمة scroll :
والنتيجة هكذا هي:
وكما تلاحظ ظهر زر scrolling .
موعدنا في الدروس القادمة مع الخاصيتين padding و margin الذين تعمدت تأجيلهما إلى مابعد هذا الدرس ، ودمتم في رعاية الله وحفظه.