خب توی این جلسه
خیلی سریع یاد می‌گیریم چطور floatها رو پاک (clear) کنیم
توی جلسه‌ی قبل ما مشکلی ایجاد کردیم
که این المان main header قرمز اینجا ارتفاعش جمع شد
که یادتون باشه دلیلش این بود که تمام
المان‌های فرزندش الان float شدن
خب؟ پس برای اینکه درستش کنیم باید حالا بیایم floatها رو
پاک کنیم و راحت‌ترین راه برای این کار
که البته بهترین راه نیست اما آسون‌ترینشه
اینه که یه المان دیگه اینجا به header اضافه کنیم
و از اونجا floatها رو پاک کنیم
پس بیاید یه div اینجا با کلاس clear اضافه کنیم
و اسمش اینجا واقعاً مهم نیست
باشه این المان رو هم خالی می‌ذاریم
چون نمی‌خوایم محتوایی داخلش باشه درسته؟
خب اگه ذخیره کنیم فعلاً هیچ تغییری نمی‌کنه
چون این دو تا المان float شدن
و این یکی خالیه و بنابراین
هیچ اثری نداره
اگه اینجا محتوایی اضافه کنیم
می‌بینید که کمی وضعیت بهتر میشه
ولی خب این چیزی نیست که ما بخوایم
پس برای اینکه اینو واضح‌تر ببینیم بیایم واقعاً
به main-header یه رنگ دیگه بدیم
و روش کار من اینه که خیلی ساده یه
استایل دیگه بعدش تعریف کنم
پس استایل اصلی این بود و بعدش می‌تونم
یه استایل دیگه بنویسم و این یکی
روی اولی override می‌کنه
اینطوری بعداً می‌تونم خیلی راحت این خط رو حذف کنم
خب حالا کاری که می‌خوام بکنم اینه که
اون المانی که همین الان ساختیم رو انتخاب کنم
یعنی همونی که کلاس clear داره
پس اینجوری انتخابش می‌کنیم و اینجا می‌تونیم
از خاصیت clear استفاده کنیم و توی clear می‌تونیم left
right یا both رو بذاریم
حالا اگه فقط بخوایم floatهای سمت چپ رو پاک کنیم
اینجا می‌نویسیم clear left
و برای right هم همینطوره
اما توی این حالت ما یه float سمت چپ داریم و یه float سمت راست
پس باید هر دوتاش رو پاک کنیم
برای همین از both استفاده می‌کنیم
و اگه اینو ذخیره کنیم می‌بینیم مشکل واقعاً حل شد
عالیه
قدیما ما همه‌ی layoutهامون رو با
استفاده از خاصیت float می‌ساختیم
پس تصور کنید یه row داشتیم و
داخلش چهار تا ستون (column) داشتیم
پس برای هر ستون یه المان لازم بود
و همه‌شون رو کنار هم float می‌کردیم
بعد توی اون شرایط ارتفاع row
یعنی المان والد اون چهار ستون
می‌ریخت پایین (collapse می‌کرد)
و مجبور می‌شدیم توی هر بار یه div خالی
به همون شکل اضافه کنیم
و این می‌تونست ۱۰ یا ۲۰ بار توی یه صفحه تکرار بشه
و خب این اصلاً به دردبخور نبود درسته؟
و همچنین ما نمی‌خواستیم HTML رو پر از
این divهای خالی کنیم
پس این یه عادت بد (bad practice) بود
خب بیاید اینجا اینو پاک کنیم و
یه تکنیک دیگه ببینیم که می‌تونیم استفاده کنیم
قبل از اینکه این کار رو کنم یادتون باشه دوباره
که ساختن layout با float الان دیگه قدیمیه
پس لازم نیست صددرصد همه‌چی رو
درباره‌ی این بدونید مخصوصاً clear
اما من فکر می‌کنم مهمه که حداقل
یه ایده‌ای از نحوه‌ی کارش داشته باشید و مخصوصاً این
ترفندی که الان می‌خوام بهتون نشون بدم که بهش میگن
"clearfix hack"
خب clearfix hack چیزی بود که سال‌های سال
خیلی زیاد توی جامعه‌ی CSS استفاده می‌شد
و دلیلش دقیقاً همین بود که جلوی این
divهای خالی رو بگیره همونطور که قبلاً توضیح دادم
پس این خوب نبود و بنابراین یه نفر
این clearfix hack رو معرفی کرد
روش کارش اینجوریه که روی المانی که ارتفاعش
جمع شده مثل همین header اینجا
یه کلاس اضافه می‌کردیم که معمولاً اسمش clearfix بود
اینطوری باشه؟
پس ما کلاس clearfix رو اونجا اضافه می‌کردیم و بعدش توی.
CSS اون رو انتخاب می‌کردیم و یه pseudo element
و به‌طور خاص pseudo element "after" رو استفاده می‌کردیم
و یادتون باشه که این عملاً یه المان جدید ایجاد می‌کنه
که میشه آخرین المان فرزند اون container
و بنابراین به نوعی این کار دقیقاً همون کاریه که
ما دستی یه div خالی اینجا اضافه کنیم درسته؟
چون دوباره کاری که after pseudo element می‌کنه اینه که
یه المان جدید درست آخر container وارد کنه
که توی این مثال همون المان header هست
پس این یکی چون ما کلاس clearfix رو
به اون المان هم اضافه کردیم
و بنابراین حالا می‌تونیم floatها رو روی این پاک کنیم
پس هر دو رو پاک می‌کنیم اما یادتون باشه دو نکته‌ی خاص
درباره‌ی pseudo element after وجود داره
اول اینکه فقط وقتی ظاهر میشه که چیزی
برای خاصیت content تعریف کرده باشیم
یادتونه؟
پس توی content باید حتماً چیزی باشه حتی
اگه فقط یه متن خالی هم باشه کافیه
و همینطور به‌طور پیش‌فرض pseudo elementهایی مثل "after"
و "before" المان‌های inline هستن
اما پاک کردن floatها به این روش فقط وقتی درست کار می‌کنه
که روی یه المان block-level باشه
پس ما خاصیت display رو روی
این المان قرار می‌دیم روی "block"
و با این کار مشکل باید همین حالا هم حل بشه
و در واقع همینطوره ببینید
خب بیاید سریع بررسیش کنیم
اینجا همون pseudo elementیه که تازه ساختیم
و حالا floatها اینجا پاک شدن
پس اگه اینو برداریم می‌بینید
که ارتفاع‌ها دوباره collapse می‌کنن
خب همین بود
پس اینطوری floatها رو توی layoutهای مبتنی بر float پاک می‌کنیم
باز هم با استفاده از همین کلاس "clearfix" که
قدیما همیشه استفاده می‌شد
و الان بهش می‌گیم "clearfix hack" درسته؟
خب حالا مرحله‌ی بعد اینه که از این دانش استفاده کنیم تا
یه layout خیلی ساده با float بسازیم تا
صفحه‌مون شبیه این بشه
مثل اون دمو نهایی که همینجا دارم خب؟
پس می‌تونیم خیلی راحت با float این کارو بکنیم
و خب بیاید الان امتحانش کنیم