CSS يطفو وأوضح في 5 أسئلة

CSS "Floats" (عناصر عائمة) سهلة الاستخدام ولكن بمجرد استخدامها ، يصبح التأثير الذي تتركه على العناصر المحيطة به في بعض الأحيان غير متوقع. إذا واجهت مشكلات اختفاء العناصر أو العوامات القريبة التي تطفح مثل الإبهام الحاد ، فلا تقلق بعد الآن.

يغطي هذا المنشور خمسة أسئلة أساسية ستساعدك على أن تصبح خبيرًا في العناصر العائمة.

1. العناصر التي لا تطفو?
2. ماذا يحدث لعنصر عندما يطفو?
3. ماذا يحدث لأشقاء "العوامات"?
4. ماذا يحدث لأحد الوالدين من "تعويم"?
5. كيف يمكنك مسح "العوامات"?

بالنسبة للقراء الذين يضيفون نهج TL؛ dr إلى الحياة ، يوجد ملخص بالقرب من نهاية المنشور.

1. العناصر التي لا تطفو?

ل مطلق أو عنصر ثابت الموضع لن تطفو. لذلك في المرة القادمة التي تواجه فيها تعويمًا لا يعمل ، تحقق من وجوده الموقف: المطلق أو الموقف: ثابت وتطبيق التغييرات وفقا لذلك.

2. ماذا يحدث لعنصر عندما يطفو?

عندما يتم تمييز عنصر "تعويم" ، فإنه يتم تشغيله إما إلى اليسار أو اليمين بشكل أساسي حتى يتم ذلك يضرب جدار عنصر الحاوية. بدلا من ذلك ، سوف يعمل حتى يضرب عنصر عائم آخر قد ضرب بالفعل نفس الجدار. سيظلون يتراكمون جنبًا إلى جنب حتى تنفد المساحة ، وسيتم تحريك الوافدين الجدد إلى أسفل.

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

إليك شيئان آخران يحدثان لعنصر عائم اعتمادًا على نوع العنصر الذي يتم الاحتفاظ به عائمًا:

(1) سيتحول عنصر مضمّن إلى عنصر مستوى الكتلة عندما طرحت.

تساءلت يوما لماذا فجأة كنت قادرا على تعيين الطول والعرض إلى العائمة امتداد? ذلك لأن جميع العناصر عندما تعوم ستحصل على القيمة منع ل لها عرض صفة، عزا (مضمنة الجدول سوف تحصل الطاولة) مما يجعلها كتلة عناصر المستوى.

(2) سيتم تقليص عنصر كتلة ذو عرض غير محدد لتناسب محتواه عند طرحه.

عادةً ، عندما لا تحدد العرض إلى عنصر كتلة ، يكون عرضه هو الافتراضي 100٪. لكن عندما تطفو ، ليس هذا هو الحال. سوف يتقلص مربع عنصر الكتلة حتى تظل محتوياته مرئية.

3. ماذا يحدث لأشقاء "العوامات"?

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

"العوامات" لديها الأشقاء الأكثر رعاية وطاعة في العالم بأسره. سيفعلون كل ما في وسعهم لاستيعاب عنصر عائم.

ال النص والعناصر المضمنة سوف ببساطة تفسح الطريق لـ "Floats" وستحيط بـ "Float" عندما يكون في الموقف.

ال عناصر كتلة سوف تذهب خطوة أخرى وسوف التفاف أنفسهم حول "تعويم" بسخاء ، حتى لو كان ذلك يعني التخلص من العناصر الفرعية الخاصة بهم لتوفير مساحة لـ "Float".

دعونا التحقق من ذلك في تجربة. يوجد أدناه مربع أزرق وبعده صندوق أحمر بنفس الحجم مع بعض العناصر الفرعية.

الآن ، دعنا نطفو الصندوق الأزرق ، ونرى ماذا سيحدث للمربع الأحمر وأطفاله.

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

عندما تضيف إخفاء الفائض لعنصر تم لفه ، فلن يتوقف عن فعل ذلك. انظر أدناه كيف يتصرف الصندوق الأحمر إخفاء الفائض.

4. ماذا يحدث لأحد الوالدين من "تعويم"?

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

عادةً ما يزيد عنصر الكتلة ذو الارتفاع غير المحدد من ارتفاعه لاستيعاب عناصره الفرعية ، ولكن هذا ليس هو الحال بالنسبة للأطفال "الطفو". إذا زاد حجم "Float's" ، فلن يزيد الأصل من ارتفاعه وفقًا لذلك. هذا مرة أخرى يمكن حلها باستخدام إخفاء الفائض في الوالد.

5. كيفية مسح "العربات"?

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

وهذه هي الطريقة التي تجعل العنصر يعيش بالقرب من "تعويم" مع عدم وجود تنازلات.

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

واضح: اليسار ؛ واضح: صحيح ؛ واضحة على حد سواء؛ 

اليسار تُمسح القيمة كل "Floats" على يسار العنصر ، والعكس صحيح حق, وعلى كلا الجانبين ل على حد سواء. هذه واضح يمكن استخدام السمة على div أو أخت فارغة أو على عنصر زائف حسب راحتك.

ملخص

1. لن تطفو العناصر المطلقة / الثابتة.
2. "تعويم" لا يتجاوز العنصر قبل في الكود.
3. إذا لم يكن هناك مساحة كافية في الحاوية ، فسيتم الضغط على "Float".
4. جميع "Floats" مصنوعة في عناصر على مستوى الكتلة.
5. إذا لم يتم تحديد العرض على "Float" ، فسوف يتقلص لتناسب المحتوى.
6. إن الأشقاء اللاحقين لـ "Float" سوف يحيطون بهم (مضمون ونص) أو يلتفون (كتل).
7. لإيقاف عنصر من التفاف "Float" ، استخدم إخفاء الفائض.
8. لن يرفع آباء "الطفو" ارتفاعه ليناسب الطفو.
9. لجعل الوالد زيادة طوله وفقا ل "تعويم" ، واستخدام إخفاء الفائض (أو إنشاء شقيق فارغ مع واضح بعد ذلك)
10. لمنع عنصر بالقرب من أي "تعويم" استخدام واضح صفة، عزا.