درک نکردن کد

در مثال ذکر شده، از اونجایی که عنصر شناور شده ( float) از جریان چیدمان معمول صفحه خارج میشه، و محتوای متنی هم کم هستش، عکس مون از نگهدارنده ای که داخلش هست (div)، بیرون میوفته.
به کمک شبه عنصر after، گویی محتوایی همیشگی رو به انتهای نگهدارنده اضافه می کنیم و سپس با مقداردهی clear: both کاری می کنیم که اثر عناصر شناور شده ( float) در بخش های بالاتر، در هر دو سمت چپ و راست از بین بره.
توجه: چند تا موضوع باهم ترکیب شده و این کد ساخته شده، فهمش مشکل هستش.

سلام
در تکمیل حرف دوست عزیز آقا میلاد بگم که این ویژگی float و clear دیگه خیلی مثل قبل استفاده نمیشه !
نه اینکه نشه ها!!!! یا بگیم مرده !!! نه منظورم اینه کاربردش کاهش پیدا کرده !

الان دیگه اینقد موارد دیگه css جامع هستن که کتر میایم سمت float !
یادش بگیر ولی تمرکزتو بیشتر بزار رو Flex , Grid , Position , Display چون اینا خیلی مهمن ....

@SpyStar0003
با درود، علیرغم اینکه حرف تون صحیح هستش، ولی این سخن در بستر چیدمان عناصر معنی میده. برای چیدمان عناصر از روش float دیگه استفاده نمیشه. / منتها با امکاناتی که flexbox و grid برای کدنویسی CSS و ایجاد چیدمان (Layout) عرضه کردند، به نوعی میشه گفت float تازه داره درست استفاده میشه، دقیقا برای چیزی که از ابتدا ساخته شده بود، مورد استفاده قرار می گیره. این مثالی هم که دوست مون آوردند و طرح پرسش کردند، یک کاربرد درست و بجا از خصوصیت float در طراحی هستش.

بله بله کاملاً صحیحه ولی من یادمه بعضیا میومدن مثلا برای layout سایت از float استفاده میکردن که خوب کلی مشکل داشت ( چه چیز مزخرفی بود )

به نوعی میشه گفت float تازه داره درست استفاده میشه

در واقع اصل مطلب همینه ...
یادگیریش نیاز هست ولی کاربردش خاصه یعنی یه جایی هست فقط باید float باشه !!!!

بنده با مفهوم after و content:""و بقیه مفاهیم اشنا هستم اما همچنان متوجه این 3 خط و همکاری کردن انها باهم نمیشم😅😞
ممنون میشم بالخصوص به کمک content:""مسئله را توضیح بدید دوست عزیزک

@Amirzh
هنگامی که عنصری مانند p را ایجاد می کنید، این عنصر دارای دو tag باز و بسته هستش و همچنین دارای متنی است که محتوای (content) آن را شامل میشه. / حالا شبه عنصر ::after هم همین حالت رو داره، وقتی ازش استفاده می کنید، نیاز هستش که محتوای (content) آن را مشخص کنید. برای همین می نویسیم content:""، یعنی محتوای آن را تعریف کردیم و مقدارش هم هیچ چیز خاصی نیست.

پس هدف ما از طراحی شبه عنصر .clearfix::after اینه که، با اضافه کردن کلاس .clearfix به یک نگهدارنده (در اینجا عنصر div)، خودبخود در انتهای این عنصر، یک عنصری رو اضافه کنه (در واقع شبه عنصری رو اضافه می کنه). این عنصر چه کارکردی داره؟ بوسیله clear: both سبب میشه، 1 عناصری که بالاتر از خودش هستند و دارای حالت شناورند (float) در هر دو سمت پاک شوند، یعنی دیگه عناصر ایجاد شده پس از آن، کنار این عنصر شناور قرار نمی گیرند، 2 همچنین در اینجا سبب میشه محتوای شناور شده، از نگهدارنده مون خارج نشه.
display: table هم برای اینه که شبه عنصرمون کل عرض در دسترس رو بپوشونه، حتی می تونه display: block باشه. تفاوتی نمی کنه.

متوجه شدم دوست عزیزم...تشکر از شما😍فقط سوالی که باقی میمونه اینه که clear:both دقیقا کجارا پاک میکنه؟

عنصر شناور (float)، سبب میشه که عناصر پس از خودش (چه همزاد و چه غیرهمزاد)، تا جایی که ارتفاع عنصر شناور ادامه داشته باشه، به جای اینکه زیر آن باشند، بالا بیان و کنار هم قرار بگیرند.
حالا اگر بخواهیم عنصر ِ (فرض کن با نام X) پس از عنصر شناور شده، به بالا حرکت نکنه و اثر شناوری رو از بین ببره، به این عنصر X خصوصیت clear را می دهیم. پس clear سبب میشه که تمام عناصر شناور شده قبلی، (در سمت چپ یا راست یا هردو سمت) بی اثر شوند و حالا دیگه عنصر X کنارشان قرار نمی‌گیرد.

clear:both دقیقا کجا را پاک میکنه؟

در مثال گفته شده، اثر شناوری ناشی از عنصر img ، بوسیله شبه عنصر .clearfix::after و خصوصیت clear:both از بین میره (پاک میشه).

اقای میلاد خیلی عزیزی.متوجه شدم.دمت گرم
ایشاالله تو قله ها ببینیمیت🙌😍