حالا که دانش پایه‌ای داریم
از اینکه floatها و floatهای پاک کننده چطور کار می‌کنن
بیاید یه layout ساده برای صفحه‌مون بسازیم
و چیزی که دنبالش هستیم اینه
اینجا دوباره داریم یا در واقع aside به عنوان sidebar
در سمت راست و محتوای اصلی (main content) در سمت چپ
بعدش همچنان header رو بالای صفحه داریم
که از یه سمت تا سمت دیگه کشیده شده
و همینطور پایین هم footer هست
درسته؟
و همینطور متوجه می‌شید که container
الان خیلی بزرگ‌تره
پس همه‌ی این کارها رو انجام می‌دیم اما اول بیاید اجزای اصلی
layout خودمون رو مشخص کنیم
خب اینجا header هست که از قبل داریمش
و خیلی خوب سر جاشه
بعدش این article این aside
و footer این پایین
درسته؟
خب بیاید شروع کنیم به انتخاب این المان‌ها
اینجا توی کدمون دوباره
پس من دوباره اینجا انتخابشون می‌کنم برای همون دلیلی
که قبلاً توضیح دادم چون
بعداً می‌خوام این کد رو حذف کنم
یا غیر فعالش کنم
و اون وقت خوب نیست که این ویژگی‌ها
توی همون selectorهایی باشن که بالا داریم
خب
انتخاب article aside
و footer
و header واقعاً لازم نیست
چون از قبل کلی روش کار کردیم
باشه؟
خب اینجا سریع این کامنت رو حذف کنیم
و اولین کاری که واقعاً می‌خوام بکنم اینه که روی container کار کنم
و به طور خاص
عرضش رو بذارم روی 1200 پیکسل
و این برای همه‌ی layoutها همینطوره
چه با Float بسازیم چه Flexbox یا CSS Grid
پس اینو این بالا انجام می‌دم
خب
و همینطور می‌تونیم دوباره این رنگ رو حذف کنیم
و حالا خیلی بهتر شد
و حالا بریم سراغ کار اصلی
که در واقع گذاشتن این article اینجا
در سمت چپ و aside در سمت راست هست
و برای اینکه بهتر بتونیم تجسم کنیم
هر وقت کاری مثل این می‌کنم همیشه
به این المان‌ها یه رنگ پس‌زمینه می‌دم
تا دیدن boxها روی صفحه‌مون راحت‌تر بشه
پس رنگ پس‌زمینه به این شکل
و می‌بینید که من بیشتر و بیشتر دارم
از قابلیت autocomplete توی VSCode استفاده می‌کنم
چون بعد از یه مدت این ویژگی‌ها رو از حفظ می‌دونیم
و دیگه واقعاً لازم نیست
همه رو دستی تایپ کنیم
پس رنگ‌ها اینجا مهم نیستن
فقط برای اینکه واقعاً ببینیم چی داره اتفاق می‌افته
خب حالا بریم سراغ کار اصلی
ما قبلاً می‌دونیم float چطور کار می‌کنه
پس نباید خیلی سخت باشه
اما قبل از اینکه از float استفاده کنیم واقعاً لازمه تغییر بدیم
عرض این دو المانی رو که
می‌خوایم کنار هم قرار بگیرن
یعنی article و aside
الان هرکدومشون چون بلاک هستن
۱۰۰٪ عرض قابل استفاده‌ی container رو می‌گیرن درسته؟
پس اگه بخوایم کنار هم باشن
هرکدوم باید یه عرض مشخص داشته باشه
پس container ما 1200 پیکسل عرض داره
بیاید اینو بین article و aside تقسیم کنیم
من می‌خوام به article عرض 900 بدم
از اون پیکسل‌ها و 300 پیکسل باقی‌مونده بره برای sidebar
یعنی همین aside
و 900 به علاوه‌ی 300 دقیقاً میشه 1200
عرض container
درسته؟
خب نتیجه اینطوری میشه
و حالا تنها کاری که مونده اینه که بذاریمشون کنار هم
پس float: Left
و بعد اینجا
float: Right
و در واقع اینجا می‌شد هر دو رو استفاده کنیم
خب حالا اینم از نتیجه
الان خیلی قشنگ کنار هم قرار گرفتن
اما حالا دقت کنید ببینید چه اتفاقی برای footer افتاد
الان footer هم دور این دو المان float کرده
چون خب این دقیقاً همون کاریه که
ویژگی float انجام می‌ده
باعث می‌شه المان‌هایی که بعدش میان
دور اون المان اولی float کنن
اینجا اول article رو داریم
بعد aside و بعدش footer میاد
و وقتی aside رو float می‌کنیم
المانی که بعدش میاد دورش float می‌کنه
خب این دقیقاً همون طریقیه که floatها کار می‌کنن
که دوباره می‌تونه خیلی گیج‌کننده باشه
و همین دقیقاً دلیلیه که بعداً
floatها رو با CSS Grid و Flexbox جایگزین می‌کنیم
اما به هر حال اگه بخوایم این footer
برگرده پایین یعنی همون‌جایی که ما می‌خوایم
اون وقت لازمه که float رو پاکسازی (clear) کنیم درسته؟
اما توی این موقعیت در واقع لازم نیست که یه div خالی
جدید بسازیم یا از کلاس clearfix استفاده کنیم
چون ما همین الان اون المانی رو داریم که می‌خوایم روش
عمل clear float رو انجام بدیم درسته؟
که همون footer هست
خب؟
پس دوباره قبلاً مجبور بودیم یه div خالی بسازیم
یا از کلاس clearfix استفاده کنیم
چون هیچ المان دیگه‌ای وجود نداشت
که روی اون بتونیم float رو پاکسازی کنیم
اما حالا یکی هست
این همون المان بعدی هست که ما نمی‌خوایم شناور بشه
دور بقیه
خب؟
پس خیلی ساده می‌گیم clear: Both
معمولاً دیگه کاری با clear: left یا clear: Right نداریم
وقتی both رو بذاریم هر شرایطی باشه جواب می‌ده
و حالا می‌بینید که مشکل حل شد
و دوباره برگشته پایین همون‌جایی که واقعاً باید باشه
خب؟
حالا سریع یه نکته درباره چیزی که گفتم: توی این حالت
واقعاً مهم نیست که برای aside از float: Right استفاده کنیم
یا float: Left
دلیلش اینه که
هیچ فضای خالی بینشون وجود نداره
پس توی این حالت فرقی نمی‌کنه
ولی بیاید عملاً یه فاصله بینشون ایجاد کنیم
و توی این حالت استفاده از margin یا padding احتمالاً
بهترین راه نیست
پس به جای اون من سایز این المان article رو
یه مقدار کم می‌کنم
و این باعث میشه عملاً یه فاصله
بین این دوتا المان ایجاد بشه
خب بیایم اینو ۷۵ پیکسل کم کنیم
پس عرضش میشه فقط ۸۲۵ پیکسل
و حالا می‌بینیم که این فاصله ظاهر شد چون
این المان به سمت چپ شناوره و اون یکی به سمت راست
و وقتی فضای خالی باقی بمونه
این فاصله دقیقاً وسط این دوتا می‌مونه
حالا اگه این یکی رو بذاریم float: Left توی این حالت
ایده‌آل نیست چون اون فضای خالی میره سمت راست
اونجا یه فاصله خالی می‌مونه
پس بذاریمش همون حالت قبلی و همینطور می‌تونیم
رنگ‌های پس‌زمینه رو هم حذف کنیم
و با این کار در واقع دیگه کل لایه‌بندی تموم شد
پس این دقیقاً همون چیزی شد که توی نسخه‌ی دمو
می‌بینیم
درسته؟
عالیه
پس اینطوری یه لایه‌بندی خیلی ساده با float ساختیم
با استفاده از ویژگی float همونطور که گفتم
حالا دوباره کار با این‌ها یه کم سخت و گیج‌کننده‌ست
هم درک کردنشون سخت میشه
و هم کار کردن باهاشون
به همین خاطر کسایی که روی CSS کار می‌کردن
راه‌حل‌های مدرن‌تری مثل Flexbox و CSS Grid ساختن
و ما خیلی زود درباره اون‌ها صحبت می‌کنیم
اما فعلاً باید سریع یه چیز دیگه یاد بگیریم
و اون اینه که بالاخره مدل جعبه‌ای (box model)
رو از حالت پیش‌فرض تغییر بدیم
به یه چیزی که منطقی‌تر باشه