الfloat تستخدم لإزاحة عنصر معين يمينا أو يسارا مع التأثير على العناصر اللاحقه له

مثال

إذا كان لديك عنصرين (tow div)

b و a

إفتراضيا هما سيكونا تحت بعضهما لأن الDivs تعتبر

block-level element

إذا قمت بعمل float:right للعنصر a

فإنه سيزاح جهة اليمين و سيصعد العنصر اللاحق b

ليصبح بجانبه تماما من جهة اليسار

فيصبح الa يمينا و ال b يسارا

و لكن

إذا لم تكن هناك مساحة كافية بجانب العنصر a سيظل الb بالأسفل لأنه لم يجد مكان كافي للتموضع فيه .

و هكذا

فهو مجرد إزاحة للعناصر يمين او يسار مع التأثير على العناصر اللاحقه له

طبق نفس المثال على الul تبعك و إن شاء الله تضبط معك

أتمنى يكون الشرح واضح

بالتوفيق

بالنسبة للمثال تبعك

فالأنسب

عمل القائمة اليمنى float:right

و القائمة اليسرى float:left

ضع ديف بعدهما يحوي الخاصية clear:both

حتى لا يؤثر الfloating في القائمتين على العناصر اللاحقة

يوجد شرح جيد على w3school

السلام عليكم

ال float ببساطة هو انك بتقوم بازاحة العنصر يمين او شمال

ال container اللي معموله float لازم يكون معموله clear:both قبل وسم الاغلاق, وده من خلال عنصر تاني مثل div او من خلال عنصر وهمي (after:) في الcss

.container:after {
    content: '';
    display: block;
    clear: both;
}

العناصر اللي معمولها float بتخرج من اطار العمل (workflow) الخاص بها و فايدة الclear انه بيعمل توقيف للfloat عند اخر عنصر

ده مثال لعناصر بfloat و container بدون clear

في المثال السابق سوف ترى ان ارتفاع الcontainer قد توقف عند ال min-height و لم يقوم باحتساب ارتفاع العناصر التي بداخله لان ال container بدون clear و هذا ادى الى عدم توقف ال clear عند اخر عنصر

وده مثال لعناصر بfloat و container ب clear

أحياناً أفضل إستخدام Display:inline بدلاً من Float