آموزش طراحی سایت - ویژگی Float و Clear در CSS

در این بخش از آموزش طراحی سایت به آموزش ویژگی Float و Clear در CSS می پردازیم.

آموزش طراحی سایت - ویژگی Float و Clear در CSS

بصورت پیش فرض عناصر HTML در صفحات از بالا به پایین (به همان ترتیبی که در صفحه قرار گرفته اند) قرار می گیرند. برخی اوقات ما تمایل داریم تا در صفحات خود مطالب را تغییر مکان داده و به عنوان مثال آن ها را در کنار هم قرار دهیم. با استفاده از ویژگی float در CSS می توانیم یک عنصر را به چپ و یا راست منتقل کنیم. به عنوان مثال وقتی می خواهیم مانند مطالب روزنامه تصاویر را در کنار متون قرار دهیم می توانیم از ویژگی float بهره ببریم. ویژگی float معرفی شد تا بتوانیم طرحی شبیه به مجلات و روزنامه ها داشته باشیم. جایی که تصویری را به نمایش می گذارند و متن دور آن تصویر جریان پیدا می کند. ویژگی float مشخص می کند که یک عنصر چگونه تغییر موقعیت دهد و به عبارتی شناور شود.

آموزش طراحی سایت

ویژگی Float در CSS

ویژگی float در CSS به منظور موقعیت دهی به محتوا به کار می رود. برای مثال قرار دادن یک عکس در قسمت چپ صفحه.

ویژگی float می تواند مقادیر زیر را داشته باشد:

  • left  - انتقال به سمت چپ
  • Right - انتقال به سمت راست
  • None – بدون تغییر

در ساده ترین حالت، ویژگی float می تواند برای قرار دادن متن دور تصاویر استفاده شود.


Float:right

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی float و clear در css

Float:left

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی clear

اما اکنون ببینیم اگر از float استفاده نکنیم و به عبارتی مقدار آن برابر با none باشد خروجی به چه شکلی خواهد بود:

آموزش ویژگی clear

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

Clear و Clearfix در CSS

ویژگی Clear

بعد از اعمال کردن ویژگی float روی یک عنصر، عناصر بعدی آن، عنصر تغییر مکان یافته را نمی بینند و ممکن است حتی روی آن قرار بگیرند که معمولا این یک اتفاق ناخواسته تلقی می شود. برای حل این مشکل می توانیم از ویژگی clear استفاده کنیم. در حقیقت وظیفه ویژگی clear این است که از جریان دادن عناصر در کنار عنصری که شناور شده است جلوگیری کند.

ویژگی clear می تواند دارای مقادیر زیر باشد:

  • none  - اجازه ی قرار گرفتن عناصر را در هر دو طرف عنصر شناور شده (float) می دهد.
  • left  - اجازه ی قرار گرفتن عناصر در سمت چپ عنصر شناور شده را نمی دهد.
  • Right - اجازه ی قرار گرفتن عناصر در سمت راست عنصر شناور شده را نمی دهد.
  • both  - اجازه ی قرار گرفتن عناصر در سمت چپ و راست عنصر شناور شده را نمی دهد.

متعارف ترین نوع استفاده از ویژگی clear بعد از به کار بردن ویژگی float روی یک عنصرمی باشد.

مثال زیر حرکت عنصر به سمت چپ را غیر فعال می کند. این به این معناست که هیچ عنصر شناوری نمی تواند در سمت چپ قرار بگیرد.

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی float و clear در css

;overflow: auto

اگر ارتفاع عنصری از عنصر نگه دارنده ی خود بیشتر باشد، و float شود، از فضای عنصر نگهدارنده خود بیرون می زند. برای برطرف کردن این کار ما می توانیم از ;overflow: auto استفاده کنیم، تا محتویات سرریز شده پنهان گردند.

خروجی مثال بالا به شکل زیر است:

آموزش css

روش ;overflow: auto به دلیل سادگی آن زیاد مورد استفاده قرار می گیرد، اما مسلما تعیین overflow برای یک عنصر می تواند مشکلاتی را به همراه داشته باشد. شاید عنصر نگهدارنده محتوایی داشته باشد که بخواهد بیرون از آن قرار بگیرد, که ما با این کار جلوی این کار را می گیریم. روش جدید و بهتری که برای این کار استفاده بهتر است استفاده از کلاس clearfix است. کافی است که به عنصر نگهدارنده کلاس clearfix بدهید.

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش css

نکته: این روش از این جهت که یک بار نوشته می شود و چندین بار مورد استفاده قرار می گیرد و اینکه نیازی به عنصری در html ندارد و بعلاوه باعث ایجاد هیچ اثر جانبی نمی شود بهترین روش تا به امروز است.


مثال های متداول Float

جدول باکس ها / باکس هایی با عرض یکسان

آموزش طراحی سایت

با استفاده از ویژگی float، جابه جا کردن باکس ها و قسمت های مختلف آسان می شود:

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی float و clear در css

قرار دادن تصاویر در کنار هم 

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی float

باکس هایی با ارتفاع برابر

در مثال قبل، شما یا یاد گرفتید که چگونه باکس ها را با یک عرض یکسان کنار هم بچینید. اما این کار راحتی نیست که باکس های شناور با ارتفاع یکسان درست کنید. در مثال زیر یک روش آسان را بررسی می کنیم:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی float و clear در css

اما، این روش خیلی کاربردی نیست، بعضی وقت ها شما نمی توانید مطمئن باشید که محتوای باکس ها یکسان است.

 در این زمان CSS Flexbox به کار می آید، Flexbox می تواند به صورت خودکار باکس ها را تا جایی که متن داریم بزرگ کند و اندازه ی باکس های دیگر را دقیقا اندازه ی بزرگترین آن ها کند.


منوی ناوبری (Navigation)

هر سایتی به یک منوی ناوبری که معمولا در بالای صفحه قرار می گیرد نیاز دارد. منوهای ناوبری بخش های بسیار مهم وب سایت ها می باشند که دسترسی ما به بخش های مختلف وب سایت را آسان تر می کنند.

با استفاده از ویژگی float و یک لیست از لینک ها می توانید یک منوی افقی یا عمودی درست کنید:

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت
آموزش طراحی سایت آموزش CSS آموزش HTML آموزش ویژگی float و clear در CSS آموزش ویژگی float آموزش ویژگی clear

مقالات این دسته بندی