فرادرسFloat در CSS — آموزش CSS (بخش بیست و نهم)
مشخصه Float در CSS اساساً برای شناورسازی تصویر درون بلوک‌های متنی عرضه شد، اما در ادامه به یکی از رایج‌ترین ابزارها برای ایجاد لی‌آوت‌های چند ستونی روی صفحه‌های وب تبدیل شد. با ظهور flexbox و grid اینک مشخصه float به مقصود اولیه خود بازگشته است که آن را در ادامه این مقاله توضیح میدهیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:
برای یادگیری طرح‌بندی Grid در CSS ، مطالعه مقاله زیر پیشنهاد می‌شود:
تاریخچه Float
مشخصه float به این جهت معرفی شده است تا توسعه‌دهندگان بتوانند لی‌آوت‌های ساده‌ای شامل یک تصویر شناور درون یک ستون متنی داشته باشند که متن پیرامون سمت چپ یا راست تصویر را گرفته باشد. چنین چیدمانی را به طور معمول در صفحه‌های روزنامه‌ها می‌بینیم.
اما توسعه‌دهندگان وب درک کردند که می‌توانند نه تنها تصاویر، بلکه هر چیزی را به صورت شناور درآورند. از این رو از float به صورت گسترده‌ای استفاده کردند و برای نمونه جلوه‌های جالبی مانند drop-cap خلق کردند که در آن حرف اول پاراگراف به صورت بزرگ‌تر نمایش می‌یابد.
مشخصه‌های Float برای ایجاد لی‌آوت کلی وب‌سایت با استفاده از ستون‌های چندگانه اطلاعات که طوری شناورند که در کنار همدیگر قرار می‌گیرند مورد استفاده قرار می‌گرفتند. با این حال اینک تکنیک‌های لی‌آوت بهتری وجود دارند و این روش‌ها اکنون منسوخ و قدیمی محسوب می‌شوند. در این مقال روی مقصود اصلی مشخصه‌های Float متمرکز خواهیم شد.
یک مثال ساده از Float
در این بخش با بررسی یک مثال کاربرد Float را بررسی می‌کنیم. کار خود را با یک مثال واقعاً ساده آغاز می‌کنیم که شامل یک بلوک شناور متن پیرامون یک متن است. برای پیگیری عملی این مثال فایلی به نام index.html با محتوای زیر روی سیستم خود ایجاد کنید:
1<!DOCTYPE html>
2<html lang="en-US">
3 <head>
4 <meta charset="utf-8">
5 <title>My test page</title>
6 </head>
7 <body>
8 <p>This is my page</p>
9 </body>
10</html>در ادامه قطعه کد زیر را در بخش مناسبی از صفحه وب مثالمان وارد می‌کنیم:
1<h1>Simple float example</h1>
2
3<div class="box">Float</div>
4
5<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
6
7<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
8
9<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>سپس CSS زیر را روی HTML اعمال می‌کنیم. به این منظور از عنصر <style> یا یک عنصر <link> روی یک فایل css. جدا استفاده می‌کنیم.
1body {
2 width: 90%;
3 max-width: 900px;
4 margin: 0 auto;
5 font: .9em/1.2 Arial, Helvetica, sans-serif
6}
7
8.box {
9 width: 150px;
10 height: 100px;
11 border-radius: 5px;
12 background-color: rgb(207,232,220);
13 padding: 1em;
14}اینک اگر صفحه را ذخیره کرده و در مرورگر رفرش کنید، چیزی مانند آن چه انتظار داشتیم می‌بینید. یعنی باکس پیرامون متن و در «گردش نرمال» (Normal Flow) قرار گرفته است. برای شناور ساختن متن پیرامون آن دو مشخصه به قاعده box. اضافه می‌کنیم.
1.box {
2 float: left;
3 margin-right: 15px;
4 width: 150px;
5 height: 100px;
6 border-radius: 5px;
7 background-color: rgb(207,232,220);
8 padding: 1em;
9}اکنون اگر فایل را ذخیره و صفحه مرورگر را رفرش کنید، چیزی مانند زیر به دست می‌آید:
طرز کار Float
در این بخش طرز کار float را توضیح میدهیم. عنصری که مشخصه float روی آن اعمال شده است (در این مثال عنصر <div>) از گردش نرمال سند خارج می‌شود و به سمت چپ کانتینر والد خود (که در این مثال <body> است) می‌چسبد. هر محتوایی که زیر عنصر شناور شده در گردش نرمال صفحه بیاید پیرامون آن را می‌گیرد و فضای سمت راست آن را تا بخش فوقانی عنصر اشغال می‌کند. در این نقطه متوقف خواهد شد.
شناورسازی محتوا در سمت راست نیز دقیقاً همین جلوه را ولی در جهت عکس دارد. عنصر شناور شده به سمت راست می‌چسبد و محتوا، پیرامون آن را در سمت چپ می‌گیرد. اگر تلاش گنید مقدار float را به صورت right تغییر دهید و در مجموعه قاعده آخر margin-right را با margin-left جایگزین کنید، نتیجه شناورسازی راست را می‌بینید.
با این که می‌توانیم یک حاشیه به float اضافه کنیم تا متن را به کنار براند، اما نمی‌توانیم حاشیه‌ای به متن اضافه کنیم تا از float فاصله بگیرد. دلیل این امر آن است که عنصر شناور شده از گردش نرمال سند خارج شده است و باکس‌های آیتم‌های کناری در پشت float قرار می‌گیرند. شما می‌توانید این موضوع را با ایجاد برخی تغییرها در مثال خود تحقیق کنید.
یک کلاس special به پاراگراف نخست متن اضافه کنید. این پاراگراف درست پس از باکس شناور شده می‌آید و سپس در CSS قواعد زیر را اضافه می‌کنیم. بدین ترتیب به پاراگراف زیر یک رنگ پس‌زمینه میدهیم.
1.special {
2 background-color: rgb(79,185,227);
3 padding: 10px;
4 color: #fff;
5}برای این که این جلوه را راحت‌تر ببینید مقدار margin-right روی float را به margin تغییر دهید تا همه فضای پیرامون float را بگیرد. بدن ترتیب می‌توانید پس‌زمینه را روی پاراگرافی که درست زیر باکس شناور شده قرار دارد مانند تصویر زیر ببینید:
باکس‌های خط عنصر زیرین به صورت اختصاری درآمده‌اند، به طوری که متن درون float قرار می‌گیرد، اما به دلیل این که float از گردش نرمال حذف شده است باکس پیرامون پاراگراف سایت اندازه کامل خود را حفظ می‌کند.
پاکسازی Float-ها
در بخش‌های قبل دیدیم که float از گردش نرمال صفحه حذف می‌شود و عناصر دیگر در کنار آن نمایش می‌یابند، از این رو اگر بخواهید عنصر بعدی به سمت بالا حرکت نکند، باید آن را پاکسازی کنید. این کار با استفاده از مشخصه clear انجام می‌یابد.
در سند HTML خود که در مثال قبلی ایجاد کرده‌اید، یک کلاس cleared به پاراگراف دوم زیر آیتم شناور شده بدهید. سپس CSS زیر را به آن اضافه کنید:
1.cleared {
2 clear: left;
3}
اینک می‌بینید که پاراگراف زیر آیتم شناور عنصر float-شده را پاکسازی می‌کند و دیگر همراه با آن حرکت نمی‌کند. مشخصه clear مقادیر زیر را می‌گیرد:
- Left – آیتم شناور شده در سمت چپ را پاکسازی می‌کند.
- Right – آیتم شناور شده در سمت راست را پاکسازی می‌کند.
- Both – هر آیتم شناور شده چه چپ و چه راست را پاکسازی می‌کند.
پاکسازی باکس‌ها پیرامون یک Float
اینک با روش پاکسازی چیزی که زیر عنصر شناور شده قرار گرفته آشنا شدید، اما اگر یک عنصر float بلند و یک پاراگراف کوتاه داشته باشیم که باکسی پیرامون هر دو این عناصر را گرفته باشد چطور؟ به منظور شبیه‌سازی این حالت سند خود را طوری تغییر دهید که پاراگراف اول و باکس شناور شده هر دو درون یک <div> با کلاس wrapper قرار گیرند:
1<div class="wrapper">
2 <div class="box">Float</div>
3
4 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
5</div>در CSS نیز قاعده زیر را به مثالمان اضافه کنید:
1.wrapper {
2 background-color: rgb(79,185,227);
3 padding: 10px;
4 color: #fff;
5}به علاوه کلاس اولیه cleared. را نیز پاک کنید:
1.cleared {
2 clear: left;
3}بدین ترتیب می‌بینید که مانند مثال قبل، پس‌زمینه تا پشت float کشیده می‌شود:
در این مورد نیز دلیل این مسئله آن است که float از گردش نرمال سند خارج شده است. پاکسازی عنصر بعدی تاثیری بر مشکل پاکسازی باکس ندارد. چون می‌خواهیم انتهای باکس آیتم float شده را در بر بگیرد و حتی در صورتی که محتوا کوتاه‌تر باشدف آن را نیز در بر بگیرد. سه روش بالقوه برای حل این مشکل وجود دارند که دو مورد آن‌ها در همه مرورگرها عمل می‌کنند. با این حال این روش ها کمی پیچیده هستند، اما روش سوم به طرز صحیحی این مشکل را رفع می‌کند.
هک clearfix
روش سنتی برای حل این مشکل، استفاده از چیزی به نام هک clearfix است. این فرایند شامل درج مقداری محتوای تولید شده پس از باکس است که شامل float و محتوای پیرامونی می‌شود و clear به صورت both تنظیم می‌شود. به این منظور CSS ز یر را به مثال اضافه می‌کنیم:
1.wrapper::after {
2 content: "";
3 clear: both;
4 display: block;
5}اکنون صفحه را بارگذاری مجدد کنید تا باکس پاکسازی شود. این حالت اساساً همانند این است که یک عنصر HTML مانند یک <div> را زیر آیتم‌ها اضافه کرده و آن را به صورت clear: both تنظیم کرده باشید.
استفاده از overflow
یک روش جایگزین این است که مشخصه overflow مربوط به wrapper را روی چیزی به جز visible تنظیم کنیم. به این منظور CSS مربوط به پاکسازی را که در بخش آخر اضافه کردیم، حذف می‌کنیم و به جای آن مشخصه overflow را به قواعد wrapper اضافه می‌کنیم. این بار نیز باکس باید پاکسازی شود.
1.wrapper {
2 background-color: rgb(79,185,227);
3 padding: 10px;
4 color: #fff;
5 overflow: auto;
6}
این مثال با ایجاد چیزی به نام «زمینه قالب‌بندی بلوک» (block formatting context) یا به اختصار BFC عمل می‌کند. این زمینه مانند یک لی‌آوت کوچک درون صفحه است که درون آن همه چیز به صورت مستقل چیدمان می‌یابد، بنابراین عنصر شناور شده درون BFC قرار دارد و پس‌زمینه در پشت هر دو آیتم ادامه می‌یابد. این وضعیت به طور معمول جواب می‌دهد، اما در برخی موارد خاص ممکن است اسکرول‌بارهای ناخواسته‌ای ظاهر شوند و یا سایه‌ها به دلیل عواقب ناخواسته استفاده از overflow برش پیدا کنند.
مشخصه display: flow-root
روش مدرن حل این مشکل استفاده از مشخصه display: flow-root است. این مشخصه صرفاً برای ایجاد یک BFC بدون استفاده از هک استفاده می‌شود. بدین ترتیب در زمان استفاده از آن هیچ عواقب غیرمنتظره‌ای پدید نمی‌آ‌ید. مشخصه overflow: auto را از قاعده .wrapper حذف کنید و مشخصه display: flow-root را اضافه نمایید. با فرض وجود یک مرورگر که از این مشخصه پشتیبانی می‌کند باکس پاکسازی خواهد شد:
1.wrapper {
2 background-color: rgb(79,185,227);
3 padding: 10px;
4 color: #fff;
5 display: flow-root;
6}
سخن پایانی
در این مقاله با هر چیزی که لازم است در زمان توسعه وب مدرن در خصوص float بدانید آشنا شدیم. با این حال اگر روی برخی پروژه‌های قدیمی کار می‌کنید و یا می‌خواهید صفحه وب مورد نظرتان روی مرورگرهای واقعاً قدیمی نیز نمایش یابد، شاید بهتر است با برخی رویه‌های استفاده از float برای لی‌آوت صفحه‌های وب نیز آشنا شوید.
برای مطالعه بخش بعدی این سری مطالب روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش طراحی سایت با HTML و CSS
- آموزش طراحی وب با CSS3) CSS) – تکمیلی
- مجموعه آموزش‌های برنامهنویسی
- ساخت لینک‌های زیبا با CSS — از صفر تا صد
- دیباگ کردن CSS — آموزش CSS (بخش نوزدهم)
- آموزش CSS Grid — گام به گام، کاربردی و پروژه محور
==
