رشت، سه راه بلوار چمران، نبش کوچه فارغ دل

  telegram

01333820254 تماس با گیلان وب

صفت Floating در Css

1 1 1 1 1 1 1 1 1 1 میانگین امتیاز 5.00 (1 رای)

با استفاده از صفت های Floating نحوه قرار گیری عناصر را در صفحه در کنار یکدیگر مشخص می کنیم .
دو صفت در این قسمت توضیح داده می شود . 1 : Float . 2 .Clear
برای شناور کردن اجسام در کنار هم از صفحه Float استفاده می کنیم . روش کار این صفت به این صورت می باشد که فرض کنید در بالای صفحه شما یک لوگو همراه با یک کادر جستجو دارید و می خواهید هر دو یکی در راست و دیگری در سمت چپ قرار بگیرند .

 

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

صفت Float دارای 3 ویژگی Right - Left و None  می باشد.
Right : عناصر را به سمت راست شناور می کند .

Left : عناصر را به سمت چپ شناور می کند .

none : تصویر و متن در جایی که متن وجود دارد قرار می گیرد .

 


ویژگی Right
با توجه به توضیحات بالا می خواهم تصویر را در سمت راست متن قرار بدهم .

 

img
{
float : right ;
}

 

 ویژگی Left
با استفاده از ویژگی Left می توانید تصاویر و متن را در سمت چپ قرار دهید .

img
{
float : left;
}

 صفت Clear
با استفاده از صفت Clear اطراف یک عنصر را در جایی که دیگر عناصر شناور  مجاز نیستند تعیین می کند . در صورتیکه از صفت Clear استفاده کنیم صفت Float غیر فعال می شود .
در دو طرف عناصر ، برخی عناصر ديگر همانند عکس يا متن می توانند قرار بگيرند . توسط اين خاصيت ، کناره هايي از عنصر را که می خواهيم متن يا عکس در آن سمت قرار نگيرد را مشخص می کنيم ، که حالت های ممکن زير را می تواند داشته باشد .

در واقع از اين خاصيت برای خالی کردن فضای اطراف يک عنصر استفاده می شود .
- right : هيچ متن يا عکسی نمی تواند در سمت راست عنصر قرار بگيرد .
- left : هيچ متن يا عکسی نمی تواند در سمت چپ عنصر قرار بگيرد .
- both : هيچ متن يا عکسی نمی تواند در دو طرف عنصر قرار بگيرد .
- none : در دو طرف عنصر مجاز است که عکس يا متن قرار بگيرد ، که حالت پيش فرض است .

img
{
float : clear ;
}

 

در استفاده از خاصیت float و clear در تگ های html چند نکته است که باید مدنظر داشته باشید :
  • اگر میخواهید المان های دیگر اطراف المان float شده را بگیرند باید بصورت inline باشند یا اگر float دارند باید جهت float آنها با جهت float المان اولیه یکی باشد.
  • المان هایی که خاصیت float می گیرند، اندازه شان به اندازه محتوای داخلشون بستگی دارد و اگر محتوا کم باشد، المان مورد نظر کوچک میشه . برای رفع این مشکل باید width رو به المانی که float دارد بدهید.
  • اگر در یک المان block چند تا المان float داشته باشید ، المان بلاک جمع میشه و گاهی المان های float از پایین ، از المان parent خود بیرون می زنند.
  • اگر المانی که بعد ازالمان float شده میاد، خاصیت clear داشته باشد، دیگه اطراف المان فلوت شده را فرا نمی گیرد.
  • المانی که خاصیت clear=both دارد و float نیز شده است، فقط المان هایی را که قبل از خودش آمده است، clear میکند . نه المان های بعدی را .

 

مجوزات

گیلان وب مشاوره،طراحی و برنامه نویسی وب سایت های حرفه ای در رشت و استان گیلان

خدمات گیلان وب

  • طراحی سایت
  • طراحی لوگو
  • هاست و دامنه
  • سئو و بهینه سازی
  • طراحی رسپانسیو

جشنواره ها

تماس با ما

آدرس :رشت سه راه بلوار چمران نبش کوچه فارغ دل(نمایش روی نقشه)

تلفن :01333820254
فکس:01333843885
موبایل:09118250852

ایمیل:info@gilanweb.ir