خصوصیت float
مثال (خصوصیت float)
شناور کردن عکس در سمت راست:
{
float:right;
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
تعریف و کاربرد
با استفاده از خصوصیت float مشخص می کنیم که آیا یک box (یا عنصر) باید شناور شود یا خیر.
توجه: عناصری که دارای مکان دهی absolute هستند خصوصیت float را در نظر نمی گیرند.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.cssFloat="left" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت float را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| left | عنصر در سمت چپ شناور می شود. | نمایش دادن » |
| right | عنصر در سمت راست شناور می شود. | نمایش دادن » |
| none |
عنصر شناور نمی شود و در مکان اصلی خود قرار می گیرد. این مقدار پیش فرض است. |
نمایش دادن » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
شناور کردن اولین حرف پاراگراف در سمت چپ
در این مثال اولین حرف یک پاراگراف به سمت چپ شناور می شود و حرف استایل دهی می شود.
ایجاد یک منوی افقی
در این مثال با استفاده از خصوصیت float و لیستی از لینک ها یک منوی افقی ایجاد شده است.
ایجاد یک صفحه ورود بدون استفاده از جدول
در این مثال با استفاده از float یک صفحه ورود که حاوی header و footer و محتوای سمت چپ و محتوای اصلی است، ایجاد گردیده است.
بیاموزهای مرتبط
Styling Fonts (بیاموز CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7967
