كيف تعمل المقاصة CSS حقًا؟

Question

انا املك <div> أنني أريد أن أكون على خط من تلقاء نفسه. وفق W3Schools, ، هذه القاعدة:

div.foo {
  clear: both;
}

... يجب أن تعني هذا:

"لا توجد عناصر عائمة مسموح بها على الجانب الأيسر أو الأيمن."

ومع ذلك ، إذا أطفو اثنين <div> تركت العناصر ، وتطبيق القاعدة أعلاه على الأول ، والثاني لا يتزحزح.

من ناحية أخرى ، إذا تقدمت بطلب "clear: left" إلى الثاني <div>, ، ينتقل إلى السطر التالي. هذا هو نهايتي العادية ، لكنني لا أفهم لماذا يجب أن أفعل ذلك هكذا.

هل الوصف W3Schools أعلاه مذكور بشكل سيء ، أم أنني أفتقد شيئًا؟ هل قاعدة المقاصة قادرة فقط على نقل العنصر الذي يتم تطبيقه عليه؟

إجابه

شكرا مايكل إس وجون دي على التفسيرات الجيدة. أشار وارن إلى مواصفات CSS2, ، وهنا وجدت هذه الإجابة (التأكيد لي):

تشير هذه الخاصية إلى جوانب صندوق العنصر (ES) التي قد لا تكون مجاورة لـ ابكر صندوق عائم.

لذا: clear يؤثر فقط على موضع العنصر الذي يتم تطبيقه عليه ، بالنسبة للعناصر التي تظهر قبله الرمز.

مخيبة للآمال أنني لا أستطيع أن أخبرني <div> لجعل divs الأخرى تتحرك لأسفل ، ولكن هم الفواصل. قون

Answer 1

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

يحرر

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

Answer 2

CSS الخاص بك هو تحليل "بشكل صحيح". لا يزال Div الثاني يطفو على اليسار ، لذلك حتى بعد إزالة أول واحد ، إذا كان هناك غرفة عرضية للثانية ، فسيتم تعويمه في أعلى نقطة يمكن.

Answer 3

نعم ، تنقل المقاصة فقط العنصر الذي يتم تطبيقه عليه. ومع ذلك ، فإن النتيجة تشعر بأنها مختلفة اعتمادًا على ما إذا كان العنصر "في التدفق" أو خارج التدفق. أعتقد أن هذا يربكك.

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

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

هناك أيضا قضية فوضوية من الهامش الانهيار. تطهير المقاطعة ، في بعض الأحيان بطريقة غير بديهية.

Answer 4

يمكنك التقدم بطلب إلى العنصر الذي تريده على خط جديد. يعتمد من الواضح أنك تستخدمه على العناصر التي لا تريدها. إذا كنت تريد أن تكون Image B على خط جديد ولا تلمس الصورة A (والتي تتيح القول هي تعويم: يسار) ، فستضع الصورة B كـ {clear: Left} غير واضح كما تفكر بشكل طبيعي. أنت تقوم بمسح تعويم العنصر السابق.

Answer 5

I generally do the following for that effect:

float: left;
clear: right;

I don't know if it applies merely to the element to which it is applied, though it makes sense.

The specs are available here, though: http://www.w3.org/TR/REC-CSS2/