مدرس: خب قبل از اینکه واقعا یک چیدمان با float بسازیم
اول باید بفهمیم ویژگی float دقیقا چطور کار می‌کنه
که این دقیقا هدف این بخش از درس ماست
پس این چیزی هست که توی این جلسه یاد می‌گیریم
خب توی این قسمت
می‌خوایم روی صفحه‌ی پست وبلاگی‌مون کار رو ادامه بدیم
که از مجله‌ی The Code داشتیم
و از هر سه روش ساخت چیدمان استفاده می‌کنیم
تا یه همچین چیدمانی درست کنیم
اینجا می‌بینید که Header صفحه
که شامل عنوان و بخش منو (navigation) هست
عملاً کل عرض صفحه رو گرفته
از چپ تا راست
عنوان و منو کنار همدیگه هستن
و این پایین
بخش "پست‌های مرتبط" رو به شکل یک سایدبار داریم
پس محتوای اصلی این طرف سمت چپ قرار داره
و سایدبار این طرف سمت راست
که هر دو زیر اون Header کامل هستن
و آخر صفحه هم پایین اینجا
یه فوتر داریم
که اون هم باز کل عرض صفحه رو می‌گیره
الان رنگش یه‌کم عجیب به نظر میاد
ولی خب اون رو بعداً درستش می‌کنیم
چیزی که مهمه اینه که این نوعی از یه چیدمان ساده‌ست
که قراره بسازیم
با استفاده از float flexbox و CSS Grid
پس این سه روش رو به کار می‌بریم
خب؟
اما فعلاً برای شروع این بخش
من روی دسکتاپم یک سری فایل شروع (starter files) جدید می‌سازم
چون داریم ادامه‌ی بخش قبلی رو می‌سازیم
فقط کافیه همون پوشه‌ی قبلی رو کپی کنم
و یه نسخه‌ی جدید ازش درست کنم
بعد اسمش رو می‌ذارم CSS-Layouts
ولی مثل بخش قبل یادتون باشه
لازم نیست شما هم این کار رو بکنید اگه نمی‌خواید
می‌تونید راحت توی همون فایل‌ها کار کنید
توی همون پوشه‌ی پروژه
که تا الان داشتید استفاده می‌کردید
پس مشکلی نداره
من فقط این کار رو می‌کنم
که آخر سر همه‌چی مرتب و منظم باشه
و بتونم هم فایل‌های شروع
و هم فایل‌های نهایی هر بخش رو
کنار هم بهتون تحویل بدم
خب
برگردیم به Visual Studio Code
اینجا من معمولا راست‌کلیک می‌کنم
و یه پنجره‌ی جدید باز می‌کنم
بعد Open Folder رو می‌زنم
روی دسکتاپ
این همون پوشه‌ایه که می‌خوام
خب؟
در همین حین VS Code من آپدیت شده
و ظاهرش یه ذره فرق کرده
ولی خب این اصلا مهم نیست
چیزی که مهمه اینه که فایل‌های ما
دقیقاً همونجوری هستن که قبلاً گذاشته بودیم
پس بیایم فایل‌های مربوط رو باز کنیم سایدبار رو ببندیم
و دوباره به live connection برگردیم
پس دوباره روی Go Live کلیک می‌کنم
و این صفحه دوباره میاد بالا
دقیقاً همونجوریه که قبلاً گذاشته بودیم
و این نقطه‌ی شروع ما برای ادامه‌ی کار خواهد بود
خب
بریم پایین‌ترین قسمت صفحه‌مون
اینجاست که قراره یادگیری float رو شروع کنیم
پس یه بخش کوچیک توی CSS اضافه می‌کنم
و برای اینکه یادگیری float رو شروع کنیم
بیاید این قسمت از صفحه‌مون رو نگاه کنیم
فرض کنید می‌خواستیم این دو تا المان اینجا
کنار همدیگه نمایش داده بشن
الان که اینطور نیستن
چون یادتونه که این یه تگ پاراگراف هست
و به صورت پیش‌فرض یک المان Block هست
یعنی همیشه خط خودش رو می‌گیره
قبل و بعدش هم یه خط جدید درست می‌کنه
خب می‌شه با inline یا inline-block کردن پاراگراف اینو درست کرد
ولی حالا می‌خوایم یه روش دیگه رو بررسی کنیم
اونم استفاده از float هست
پس برای این دو تا المان یه کلاس تعریف می‌کنیم
توی HTML تا راحت‌تر انتخابشون کنیم
اینجا این یکی در واقع قبلاً یه ID به اسم author داشت
همونطور که قبلاً هم گفتم من معمولا کلاس رو ترجیح می‌دم
پس بهش یه کلاس به اسم author هم اضافه می‌کنم
و برای این یکی هم می‌ذارم author-img
یعنی کلاس "author-img" رو براش تعریف می‌کنم
خب؟
حالا بیایم استایل مربوط به author رو هم اضافه کنیم
یعنی یه selector براش تعریف کنیم
خب حالا می‌خوایم از ویژگی float استفاده کنیم
توی این حالت مقدارش رو روی left می‌ذاریم
ولی همونطور که می‌بینید چند گزینه داریم
برای float؛ اصلی‌ترین‌هاش left right یا none هستن
پس ما اینجا از left استفاده می‌کنیم
و اتفاقی که می‌افته اینه که
این تصویر عملاً از جریان اصلی سند (document flow) خارج می‌شه
درست مثل المان‌هایی که position: Absolute دارن
حالا تفاوت اینجا با floatها
اینه که همه‌ی المان‌های دیگه
عملاً دور اون شناور میشن (دورش قرار می‌گیرن)
پس بیایم ذخیره کنیم و ببینیم چی میشه
و این هم نتیجه‌ی ایجاد اون جریان (flow)
همونطور که گفتم این المان الان عملاً داره حرکت می‌کنه
دور این یکی
و اگه متن بیشتری اضافه کنم
اون موقع خیلی واضح‌تر میشه
بیایم واقعاً این کارو بکنیم
اینجا یه مقدار متن بیشتر اضافه کنیم
و یه ترفند خوب تو VS Code هست
اینکه اگه شروع کنی به تایپ کردن "lorem"
یعنی L-O-R-E-M بعد Enter بزنی
این به صورت خودکار یه سری متن ساختگی تولید می‌کنه
که ما بهش می‌گیم متن کور (blind text)
خب بیایم ذخیره کنیم
و حالا خیلی واضح‌تر میشه دید
که این متن چطور عملاً دور این تصویر شناور میشه
درسته؟
پس این فقط یه تست بود
بیایم برش گردونیم به حالت قبل
و حالا بیایم یه مقدار فاصله اینجا اضافه کنیم
بین این المان‌ها
فقط برای اینکه بهتر ببینیم
float دقیقاً چی کار می‌کنه
چون الان اگه تنظیم کنیم
یه چیزی مثل padding-left برای جابه‌جاییش
مثلاً 10 پیکسل
هیچ اتفاقی نیفتاد
پس بیایم بررسیش کنیم
اینجا تو این لایه‌ی نمایشی می‌بینید
بیایم واضح‌ترش کنیم
اینجا خیلی واضح می‌بینیم که خود المان
واقعاً از اینجا که متن شروع میشه آغاز نمیشه
بلکه دقیقاً پشت تصویر شروع میشه
برای همین اضافه کردن 10 پیکسل padding
که در واقع با رنگ سبز مشخص شده
اگه دقیق نگاه کنید سمت چپ تغییر زیادی ایجاد نمی‌کنه
در واقع هیچ تغییری ایجاد نمی‌کنه
بیایم یه مقدار بیشتر بذاریم مثلاً 50
و باز هم هیچ تغییری نکرد
چون المان هنوز پشت تصویر قرار داره
پس باید خیلی بیشتر اضافه کنیم
مثلاً بگیم 80 پیکسل
و فقط الان کافیه که
شروع کنه از پشت تصویر بیرون بیاد
پس اینجا دوباره می‌تونیم تأیید کنیم
که این تصویر کاملاً از جریان صفحه خارج شده
انگار اصلاً توی صفحه نیست درسته؟
اصلاً روی المان‌های اطراف تأثیری نداره
به اطرافش واقعاً کاری نداره
حالا قبل از اینکه ادامه بدیم
بیایم یه padding از بالا هم اضافه کنیم
مثلاً 10 پیکسل
خوبه
و حالا بذارید نشونتون بدم چطور میشه این مشکل رو حل کرد
که المان p عملاً از ابتدای container شروع میشه
یعنی پشت تصویر
خب پشت تصویر
کاری که می‌تونیم بکنیم اینه که این المان رو هم float کنیم
بیایم اون رو هم float left بدیم
و حالا دوباره چک کنیم
الان المان دقیقاً بعد از تصویر float شده شروع میشه
درسته؟
پس این احتمالاً یه مقدار عجیب به نظر میاد
و یه کم هم گیج‌کننده به گوش می‌رسه
اما این دقیقاً رفتار floatهاست
اوکی؟
ما می‌تونستیم اون رو راست هم float بدیم
و اون موقع میره سمت راست container
یعنی درست اینطوری
مثل این
اما دوباره الان راه‌های مدرن‌تری داریم
برای انجام این کارها
به طور خاص flexbox و CSS grid
اما هنوزم من معتقدم مهمه
که دانش پایه‌ای از نحوه‌ی کار floatها داشته باشید
خب پس بذارید دوباره بذاریمش روی left
و حالا اینجا بیایم این رو برداریم
و به‌جاش فقط یه margin سمت چپ بدیم
چون الان دوباره این امکان‌پذیره
اوکی
و الان ظاهر خیلی مرتب‌تری پیدا کرده
انگار که این یه layout خیلی
خیلی کوچیک از یه component باشه
حالا برای ایجاد یه مقدار فاصله اینجا
بین این تصویر
یعنی در واقع بین این قسمت و تصویر
چطور می‌تونیم این کار رو بکنیم؟
خب بیایم margin-bottom برای این تصویر بذاریم
فقط برای تست
یعنی margin-bottom به اندازه 20 پیکسل
و می‌بینید که یه المان float شده هنوزم می‌تونه
دور خودش margin ایجاد کنه
درسته؟
پس در واقع اینجا باید از margin استفاده کنیم
نه padding
چون چیزی که می‌خوایم در اصل فاصله‌ی بیرونی هست
از خود المان
بیاییم اینو بیاریم پایین‌تر
و برای انجام این کار
من در واقع از یه میانبر خوب استفاده کردم
که اینجا توی Selection هست
که همین گزینه‌ست
یعنی Move Line Up یا Move Line Down
که برای من Alt یا Option + کلید جهت پایین هست
این یه میانبر فوق‌العاده کاربردیه
که من همیشه ازش استفاده می‌کنم
برای جابه‌جا کردن یه قسمت از کد
پس دوباره می‌تونم Option + بالا یا Option + پایین بزنم
تا اینطوری بالا و پایینش کنم
درسته؟
خب این عملکرد پایه float هست
که یه مقدار عجیبه
ولی بیاییم عجیب‌ترش کنیم و چندتا float اضافه کنیم
به المنت‌های اینجا
به این h1 و به این ناوبری (nav) اینجا
خب می‌تونستیم اینو روی المنت‌هایی که
قبلاً انتخاب کردیم بذاریم
مثل h1 اینجا
و nav اینجا
ولی بهتره دوباره انتخابشون کنیم
چون بعداً می‌خوام
این کدی که نوشتیم رو پاک کنم
وقتی دیگه از float استفاده نکنیم
خب انتخاب دوباره و دوباره این المنت‌ها
طبیعتاً مشکلی نداره
می‌تونیم چندبار انتخابشون کنیم
و همه‌ی پراپرتی‌ها روی اون‌ها اعمال می‌شن
کاری که می‌خوام اینجا بکنم اینه که اینو float کنم
سمت چپ
و nav رو بفرستم سمت راست
پس هدف اینه که هردوشون توی یه خط باشن
و هر کدوم به یه طرف float بشن
چون این یه پدیده جالب ایجاد می‌کنه
که می‌خوام بهت توضیح بدم
پس float: Right
ببینیم چی می‌شه
خب این چیزی نبود که انتظار داشتم
چون nav کامل نرفته سمت راست
بیاییم یه کم دیباگ کنیم اینجا
و خب توی این مورد
خیلی ساده‌ست
اینجا h2 نیست طبیعتاً
حواسم پرت شد
در واقع nav هست
باشه؟
و حالا بیشتر رفته سمت راست
و اگه بازش کنیم
خب فعلاً چیزی تغییر نکرد
ولی مهم اینه که اینجا
الان به راست float شده
و اون یکی به چپ
حالا نکته جالبی که اتفاق افتاده
و می‌خواستم بهت نشون بدم
اینه که اگه به این بک‌گراند خاکستری دقت کنی
شاید بهتر باشه واضح‌ترش کنیم
پس این هدر رو سریع تغییر بدیم به قرمز
و حالا چیزی که می‌بینیم
اینه که این المنت انگار ارتفاعش رو از دست داده
پس خیلی عجیب به نظر میاد
در واقع تنها دلیل اینکه هنوز دیده می‌شه
اینه که یه مقدار padding داره
پس اگه padding رو برداریم
این المنت کامل ناپدید می‌شه
حداقل رنگ پس‌زمینه پشتش
خب چرا این اتفاق می‌افته؟
دلیلش اینه که همه‌ی بچه‌های این المنت
که اینجا فقط دوتا هستن درسته؟
پس هدر فقط دو تا بچه داره:
یکی h1 و یکی nav
و الان هر دوتاشون float شدن
این یعنی انگار اصلاً روی صفحه نیستن
انگار که حذف شدن
و حالا این المنت دیگه هیچ محتوایی نداره
برای همین منطقیه که
ارتفاعش در واقع صفر شده باشه
پس الان ارتفاعش صفر حساب می‌شه
تنها فضایی که باقی مونده به خاطر padding هست
تنها فضایی که می‌بینیم
به خاطر padding باقی مونده
و اگه این پایین بیاییم توی box model می‌بینیمش
عرض هنوز 720 هست
ولی ارتفاع واقعاً صفره
و فقط این padding بیست پیکسل بالا و پایین
باعث شده هنوز این المنت دیده بشه
وگرنه رنگ پس‌زمینه
کامل ناپدید می‌شد
دقیقاً مثل وقتی که اینو بذاریم اینجا
اولی رو بذاریم صفر
درسته؟
این پدیده چیزی هست که بهش collapsing element می‌گیم
و وقتی این اتفاق می‌افته
می‌گیم ارتفاع المنت collapse شده
و دوباره این اتفاق افتاد
چون هردوی بچه‌ها float شدن
پس انگار دیگه توی صفحه وجود ندارن
خب طبیعتاً ما اینو نمی‌خوایم
ما هنوز می‌خوایم این المنت اینجا باشه
به همون ارتفاعی برگرده که قبلاً داشت
ما در واقع می‌تونیم اینو درست کنیم
که دقیقاً کاریه که توی جلسه‌ی بعد انجام می‌دیم
اما فعلاً برای جمع‌بندی
بیاید سریع مرور کنیم که floatها چطور کار می‌کنن
و اون‌ها رو با absolute positioning مقایسه کنیم
خب floatها در واقع یک روش position دادن نیستن
مثل absolute positioning
اما هنوز هم یه روش دیگه هستن
که باعث میشه المان‌ها از جریان عادی خارج بشن
پس منطقیه که
با absolute positioning مقایسه بشن
ما می‌تونیم یه المان شناور داشته باشیم
با استفاده از float: Left یا float: Right
دقیقاً همون‌طور که قبلاً یاد گرفتیم
و همونطور که گفتم
وقتی یه المان float بشه
از جریان عادی صفحه خارج میشه
پس از این نظر
دقیقاً مثل absolute positioning هست
اما تفاوت floatها اینه که
المان‌های شناور همچنان روی المان‌های اطرافشون تأثیر می‌ذارن
برای مثال متن و المان‌های inline
واقعاً دور المان float شده قرار می‌گیرن
و از این نظر
المان‌های شناور کاملاً متفاوتن
با المان‌های absolutely positioned
که هیچ تأثیری ندارن و
از طرف المان‌های اطراف هم تحت تأثیر قرار نمی‌گیرن
نکته‌ی آخر اینکه یکی از ویژگی‌های مهم floatها
اینه که عنصر container (والد)
دیگه ارتفاع خودش رو تنظیم نمی‌کنه
بر اساس المان float شده
و دقیقاً به همین دلیل بود که
تو مثالی که دیدیم
اون عنصر container ارتفاعش جمع شد
یعنی collapse شد
خب امیدوارم این مرور سریع
و مقایسه درک floatها رو برات راحت‌تر کنه
و توی جلسه‌ی بعد
همونطور که گفتم مشکل
جمع شدن ارتفاع (collapsing heights) رو برطرف می‌کنیم
پس اونجا می‌بینمتون
به زودی