دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۳۰
  • مهر

جلسه ۲۲ : float و clear در CSS

  • دسته‌بندی‌ها :
جلسه ۲۲ : float و clear در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در هنگام تعریف عناصر html در حالت عادی ، مخصوصا در عناصر سطح block این عناصر در مرورگر در زیر یکدیگر قرار می گیرند. در اغلب موارد شما نیاز دارید که این عناصر را در یک سطر در کنار یکدیگر بچینید. در ابتدا از جداول برای این منظور استفاده می شد، اما جدیدا راه های ساده تری از جمله استفاده از ویژگی های float و clear در CSS برای مرتب سازی و چینش عناصر در کنار یکدیگر ارائه شده است. کار چینش عناصر در کنار هم را ویژگی float در CSS ارائه می دهد و برای از بین بردن تاثیر آن روی سایر عناصر، از ویژگی clear در CSS استفاده می شود.

      آشنایی با float و clear در CSS

      در ادامه ی این مبحث ما شما را با وضعیت های float در CSS آشنا کرده و همچنین عملکرد clear در CSS را نیز بررسی می کنیم.

      ویژگی های float و clear در CSS

      ویژگی float در CSS جهت چینش عناصر را در عنصر والد مشخص می کند.

      ویژگی clear در CSS نیز برای حذف تاثیر ویژگی float روی عناصر اطراف عنصر دارای این ویژگی استفاده می شود.

      float=left
      float=right

      ویژگی float در CSS

      ویژگی float در CSS جهت چینش عناصر را در عنصر والد مشخص می کند.

      ویژگی float در CSS شامل مقادیر زیر است:

      • left : عناصر از سمت چپ عنصر والد کنار هم می چیند.
      • right : عناصر از سمت چپ عنصر والد کنار هم می چیند.
      • none : هیچ کاری انجام نمی دهد یا وضعیت های قبلی float را حذف می کند.
      • inherit : در این حالت عناصر مقدار float عنصر والد خود را به ارث می برند.

      ساده ترین کاربرد ویژگی float قرار دادن متن در کنار تصاویر در وب سایت است.

      حالت float: right

      در مثال زیر با تنظیم حالت float در وضعیت right متن عنصر را در کنار تصویر داخل آن در سمت راست عنصر ترازبندی می کنیم.

      آشنایی با float و clear در CSS

      آشنایی با float و clear در CSS


      مثال : حالت right
      خودتان امتحان کنید »

      وضعیت float: left

      در مثال زیر با تنظیم حالت float در وضعیت left متن عنصر را در کنار تصویر داخل آن در سمت چپ عنصر ترازبندی می کنیم.

      آشنایی با float و clear در CSS - حالت left

      آشنایی با float و clear در CSS – حالت left

      کد CSS تصویر فوق به صورت زیر است:

      مثال : حالت left
      خودتان امتحان کنید »

      وضعیت None

      این وضعیت هیچ کاری انجام نمی دهد یا وضعیت های قبلی float را حذف می کند.

      ویژگی float در CSS -وضعیت None

      ویژگی float در CSS -وضعیت None


      مثال : حالت none
      خودتان امتحان کنید »

      وضعیت clear

      ویژگی clear در CSS نیز برای حذف تاثیر ویژگی float روی عناصر اطراف عنصر دارای ویژگی float و تعیین چینش آن ها استفاده می شود.

      وضعیت clear دارای مقادیر زیر می باشد:

      • none : این حالت پیش فرض بوده و اجازه قرار گیری عناصر را در هر دو سمت right و left را می دهد.
      • left : اجازه قرار گیری عناصر در سمت چپ را نمی دهد.
      • right :  اجازه قرار گیری عناصر در سمت راست را نمی دهد.
      • both : اجازه قرار گیری عناصر در سمت راست و چپ را نمی دهد.
      • inherit : از مقدار clear عنصر والد استفاده می کند.

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

      مثال کد زیر  اجازه قرار گیری عناصر در سمت چپ را نمی دهد.

      مثال : خصوصیت clear
      خودتان امتحان کنید »

      clearfix(حذف سریز)

      اگر محتوایی که دارای ویژگی float باشند اگر بزرگتر از عنصر والد خود باشند سریز رخ می دهد و از عنصر والد خود خارج می شود.

      برای جلوگیری از سریز شدن باید از ویژگی overflow استفاده کنید.

      آشنایی با float و clear در CSS - حذف سریز

      آشنایی با float و clear در CSS – حذف سریز

      برای جلوگیری از رخ دادن سریز کافیست از ویژگی overflow: auto; استفاده کنید.

      مثال : ویژگی clearfix
      خودتان امتحان کنید »

      تا زمانی که شما خصوصیات margin و padding بخوبی تنظیم کنید ویژگی overflow: auto بخوبی کار می کند.

      با این حال روش جدیدی برای clearfix و حذف سریز به صورت زیر ارائه شده که امن تر بوده و در اکثر وب سایت ها استفاده می شود:

      مثال : حالت کاملتر clearfix2
      خودتان امتحان کنید »

      ایجاد شبکه بندی Box با اندازه های برابر

      آشنایی با float در CSS - سیستم Grid

      آشنایی با float در CSS – سیستم Grid

      با استفاده از ویژگی float به راحتی می توان شبکه بندی boxهای هم اندازه در کنار هم را ایجاد کرد:

      مثال : ویژگی box-sizing: border-box
      خودتان امتحان کنید »

       box-sizing چیست

      زمانی که شما با ویژگی float یک سری box در کنار یکدیگر قرار دهید، وقتی عرض box ها از عرض صفحه نمایش بیشتر شود قرارگیری boxها در کنار هم شکسته شده و یک یا چند box به سطر بعد منتقل می شود.

      استفاده از ویژگی box-sizing جلوی به هم ریختن ترتیب قرارگیری عناصر را می گیرد.

      box-sizing اجازه می دهد که عناصر با هر اندازه ای در اندازه های مختلف صفحه نمایش کنار هم قرار بگیرند.

      قرار دادن تصاویر در کنار یکدیگر

      مثال : قرار دادن تصاویر در کنار یکدیگر
      خودتان امتحان کنید »

      ایجاد box کنار هم با ارتفاع برابر

      در مثال قبلی چگونگی قرار دادن Box هایی با اندازه های برابر در کنار یکدیگر را توضیح دادیم.

      با این حال ایجاد box ها در کنار هم با ارتفاع برابر چندان آسان نیست.

      برای این منظور باید یک مقدار ثابت برای ارتفاع تعریف کرد.

      آشنایی با float در CSS - سیستم Grid با ارتفاع برابر

      آشنایی با float در CSS – سیستم Grid با ارتفاع برابر


      مثال : ارتفاع div
      خودتان امتحان کنید »

      با این حال این طراحی چندان انعطاف پذیری خوبی ندارد، اگر مثال فوق را در دستگاه تلفن همراه چک کنید خواهید دید که محتوای box دوم بیرون می زند.

      برای حل این مشکل CSS ویژگی Flexbox را معرفی کرده است که در بخش های آتی به آن خواهیم پرداخت.

      مثال : ویژگی flex
      خودتان امتحان کنید »

      منوی Navigation

      با استفاده از ویژگی float به راحتی می توان یک منوی افقی ایجاد کرد.

      مثال : ایجاد منو navigation
      خودتان امتحان کنید »

      نمونه ای طراحی صفحات وب

      نمونه طراحی زیر با استفاده از ویژگی float ایجاد شده است.

      آشنایی با float و clear در CSS -طرح وب

      آشنایی با float و clear در CSS -طرح وب

      کد طرح CSS فوق:

      مثال : طرح وب با ویژگی float
      خودتان امتحان کنید »

      تمام ویژگی های Float در CSS

      ویژگیتوضیحات
      box-sizingعناصر HTML را با هر اندازه عرض در کنار یکدیگر حفظ می کند.
      clearترتیب قرار گیری عناصر بعد از عنصر حاوی ویژگی float را مشخص می کند.
      floatترتیب قرارگیری عناصر در کنار یکدیگر را مشخص می کند.
      overflowجلوی سریز شدن محتوای عناصر را می گیرد.
      overflow-xوضعیت سریز محتوای عنصر از سمت راست و چپ را مشخص می کند.
      overflow-yوضعیت سریز محتوای عنصر از سمت بالا و پایین را مشخص می کند.

      کلام آخر

      همانطور که در این آموزش مشاهده کردید با استفاده از ویژگی های float و clear در CSS می توان عناصر HTML را به راحتی در کنار یکدیگر به صورت مرتب و تا حدودی قابل انعطاف تنظیم کرد.

      QR:  جلسه ۲۲ : float و clear در CSS
      به اشتراک بگذارید