جلسه ی چهل و دوم: خصوصیت Float در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 9 فوریه 2019 97 بازدید

خصوصیت Float در CSSدر جلسات پیش به آموزش خصوصیت های Text-align (برای دیدن آموزش وسط چین کردن عناصر در CSS کلیک کنید) و خصوصیت Position (برای دیدن آموزش position در CSS کلیک کنید) پرداختیم. از این خصوصیت ها برای قرار دادن عناصر در مکان های دلخواه استفاده می شود. در این جلسه می خواهیم به آموزش خصوصیت Float در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

توضیح خصوصیت Float در CSS

خصوصیت Float من جمله خصوصیت هایی است که برای تعیین مکان عنصر در صفحه استفاده می شود. معمولا از این خصوصیت برای نگهداری عناصری در سمت چپ یا راست استفاده می شود. یعنی عموما کاربرد این عنصر در محور Xها می باشد. عموما از این خصوصیت برای شناور کردن عناصر در وب سایت استفاده می شود.

 

حالات مختلف خصوصیت Float در CSS

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

  1. right
  2. left
  3. none
  4. inherit

 

حالت Float: Right

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

حالت Float: left

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

حالت Float: none

این حالت به صورت پیشفرض برای تمامی عناصر وجود دارد.

حالت Float: inherit

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

 

حال که با خصوصیت Float و حالات مختلف آن آشنا شدید بیاید تا با یک مثال به درک بیشتر این موضوع بپردازیم.

کد HTML:


<img src="image/img.jpg" alt="#" width="400px" height="250px">

<p>لوگوی کمیابی ها</p>

<img src="image/img2.jpg" alt="" width="400px" height="250px">

<p>عکس یک منظره</p>

کد CSS:


img {

float: right;

margin: 20px;

}

p {

float: right;

}

خروجی کد بالا:

خصوصیت Float در CSS

 

همانطور که می دانید تگ های P و IMG جز عناصر بلاک می باشند و با بسته شدن تگ عنصر بعدی به خط بعدی منتقل می شود. در صورتی که ما بخواهیم بدون استفاده از خصوصیت Float کد بالا را بنویسیم با عکس زیر موجه خواهیم شد. در این مثال عموما می توانید به قدرت این خصوصیت پی ببرید.

خصوصیت Float در CSS

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

کاربرد های خصوصیت Float بسیار زیاد است و فقط به عکس ها ختم نمی شود. برای مثال اگر به آموزش طراحی باکس نوشته مراجعه کنید یکی دیگر از کاربرد های خصوصیت Float را خواهید دید. حتی اگر به صفحه ی همین پست نگاه کنید متوجه می شوید که قسمت ساید بار به وسیله حالت Float: Right به سمت راست صفحه منتقل شده است. عموما صفحات وب بدون این ویژگی فلج هستند.

 

نکاتی در مورد خصوصیت Float در CSS

نکته۱: به یاد داشته باشید عناصری که دارای ویژگی position: absolute هستند خصوصیت Float نمی پذیرند.

نکته۲: تمامی مرورگر ها از این خصوصیت پشتیبانی می کنند.

نکته۳: عموما زمانی که به یک عنصر خصوصیت Float را بدهیم به گوشه ای ترین نقطه ی ممکن می رود سپس باید به کمک عناصری مانند Margin عنصر را به مکان مورد نظر خود ببریم.

نکته۴: ممکن است شما از خصوصیت Float استفاده کنید ولی عرض موجود در صفحه کمتر از عرض مورد نیاز شما باشد در این صورت عنصر به خط بعدی منتقل می شود.

نکته۵: یادتان باشد که شما تگ HTML را نمی توانید به وسیله ی این خصوصیت جابه جا کنید. (شوخی شوخی با دم شیرم شوخی :))

نکته۶: یادتان باشد اگر عنصری مقادیر position: fixed یا position: absolute را داشته باشد نمی توان به آن خصوصیت Float را داد.

نکته۷: یادتان باشد زمانی که از این خصوصیت بر روی یک عنصر استفاده می کنیم جابه جایی آن بر روی عناصر دیگه اثر می گذارد.

 

خلاصه مطلب

  1. خصوصیت Float من جمله خصوصیت هایی است که برای تعیین مکان عنصر در صفحه استفاده می شود.
  2. از حالت Float: Right برای شناور کردن عناصر به سمت راست صفحه استفاده می شود.
  3. از حالت Float: left برای شناور کردن عناصر به سمت چپ صفحه استفاده می شود.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه ی چهل و دوم: خصوصیت Float در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

  • ایمیل شما هیچگاه توسط کمیابی ها فاش نمی شود.
  • لطفا از پرسش تکراری خودداری کنید.
  • برای پشتیبانی محصولات و دریافت بهترین نتیجه از بخش تیکت استفاده کنید.
  • میانگین زمان پاسخ دهی به دیدگاه ها، حدود 1 ساعت می باشد.
  • ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.