بصورت پیش فرض عناصر HTML در صفحات از بالا به پایین (به همان ترتیبی که در صفحه قرار گرفته اند) قرار می گیرند. برخی اوقات ما تمایل داریم تا در صفحات خود مطالب را تغییر مکان داده و به عنوان مثال آن ها را در کنار هم قرار دهیم. با استفاده از ویژگی float در CSS می توانیم یک عنصر را به چپ و یا راست منتقل کنیم. به عنوان مثال وقتی می خواهیم مانند مطالب روزنامه تصاویر را در کنار متون قرار دهیم می توانیم از ویژگی float بهره ببریم. ویژگی float معرفی شد تا بتوانیم طرحی شبیه به مجلات و روزنامه ها داشته باشیم. جایی که تصویری را به نمایش می گذارند و متن دور آن تصویر جریان پیدا می کند. ویژگی float مشخص می کند که یک عنصر چگونه تغییر موقعیت دهد و به عبارتی شناور شود.
ویژگی Float در CSS
ویژگی float در CSS به منظور موقعیت دهی به محتوا به کار می رود. برای مثال قرار دادن یک عکس در قسمت چپ صفحه.
ویژگی float می تواند مقادیر زیر را داشته باشد:
- left - انتقال به سمت چپ
- Right - انتقال به سمت راست
- None – بدون تغییر
در ساده ترین حالت، ویژگی float می تواند برای قرار دادن متن دور تصاویر استفاده شود.
Float:right
خروجی مثال بالا به شکل زیر است:
Float:left
خروجی مثال بالا به شکل زیر است:
اما اکنون ببینیم اگر از float استفاده نکنیم و به عبارتی مقدار آن برابر با none باشد خروجی به چه شکلی خواهد بود:
خروجی مثال بالا به شکل زیر است:
Clear و Clearfix در CSS
ویژگی Clear
بعد از اعمال کردن ویژگی float روی یک عنصر، عناصر بعدی آن، عنصر تغییر مکان یافته را نمی بینند و ممکن است حتی روی آن قرار بگیرند که معمولا این یک اتفاق ناخواسته تلقی می شود. برای حل این مشکل می توانیم از ویژگی clear استفاده کنیم. در حقیقت وظیفه ویژگی clear این است که از جریان دادن عناصر در کنار عنصری که شناور شده است جلوگیری کند.
ویژگی clear می تواند دارای مقادیر زیر باشد:
- none - اجازه ی قرار گرفتن عناصر را در هر دو طرف عنصر شناور شده (float) می دهد.
- left - اجازه ی قرار گرفتن عناصر در سمت چپ عنصر شناور شده را نمی دهد.
- Right - اجازه ی قرار گرفتن عناصر در سمت راست عنصر شناور شده را نمی دهد.
- both - اجازه ی قرار گرفتن عناصر در سمت چپ و راست عنصر شناور شده را نمی دهد.
متعارف ترین نوع استفاده از ویژگی clear بعد از به کار بردن ویژگی float روی یک عنصرمی باشد.
مثال زیر حرکت عنصر به سمت چپ را غیر فعال می کند. این به این معناست که هیچ عنصر شناوری نمی تواند در سمت چپ قرار بگیرد.
خروجی مثال بالا به شکل زیر است:
;overflow: auto
اگر ارتفاع عنصری از عنصر نگه دارنده ی خود بیشتر باشد، و float شود، از فضای عنصر نگهدارنده خود بیرون می زند. برای برطرف کردن این کار ما می توانیم از ;overflow: auto استفاده کنیم، تا محتویات سرریز شده پنهان گردند.
خروجی مثال بالا به شکل زیر است:
روش ;overflow: auto به دلیل سادگی آن زیاد مورد استفاده قرار می گیرد، اما مسلما تعیین overflow برای یک عنصر می تواند مشکلاتی را به همراه داشته باشد. شاید عنصر نگهدارنده محتوایی داشته باشد که بخواهد بیرون از آن قرار بگیرد, که ما با این کار جلوی این کار را می گیریم. روش جدید و بهتری که برای این کار استفاده بهتر است استفاده از کلاس clearfix است. کافی است که به عنصر نگهدارنده کلاس clearfix بدهید.
خروجی مثال بالا به شکل زیر است:
نکته: این روش از این جهت که یک بار نوشته می شود و چندین بار مورد استفاده قرار می گیرد و اینکه نیازی به عنصری در html ندارد و بعلاوه باعث ایجاد هیچ اثر جانبی نمی شود بهترین روش تا به امروز است.
مثال های متداول Float
جدول باکس ها / باکس هایی با عرض یکسان
با استفاده از ویژگی float، جابه جا کردن باکس ها و قسمت های مختلف آسان می شود:
خروجی مثال بالا به شکل زیر است:
قرار دادن تصاویر در کنار هم
خروجی مثال بالا به شکل زیر است:
باکس هایی با ارتفاع برابر
در مثال قبل، شما یا یاد گرفتید که چگونه باکس ها را با یک عرض یکسان کنار هم بچینید. اما این کار راحتی نیست که باکس های شناور با ارتفاع یکسان درست کنید. در مثال زیر یک روش آسان را بررسی می کنیم:
خروجی مثال بالا به شکل زیر است:
اما، این روش خیلی کاربردی نیست، بعضی وقت ها شما نمی توانید مطمئن باشید که محتوای باکس ها یکسان است.
در این زمان CSS Flexbox به کار می آید، Flexbox می تواند به صورت خودکار باکس ها را تا جایی که متن داریم بزرگ کند و اندازه ی باکس های دیگر را دقیقا اندازه ی بزرگترین آن ها کند.
منوی ناوبری (Navigation)
هر سایتی به یک منوی ناوبری که معمولا در بالای صفحه قرار می گیرد نیاز دارد. منوهای ناوبری بخش های بسیار مهم وب سایت ها می باشند که دسترسی ما به بخش های مختلف وب سایت را آسان تر می کنند.
با استفاده از ویژگی float و یک لیست از لینک ها می توانید یک منوی افقی یا عمودی درست کنید:
خروجی مثال بالا به شکل زیر است:
