ویژگی float در css | شناور کردن تگ html به چپ و راست
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت float در زبان css توضیحاتی را ارائه نماییم.
ویژگی float در اولین نسخه زبان طراحی سی اس اس یعنی CSS1 معرفی شده است.
ویژگی float در css | شناور کردن تگ html به چپ و راست
معرفی ویژگی کاربردی float در زبان طراحی css
توسط خاصیت float می توانیم تگ یا تگ های html را به سمت راست یا چپ تگ نگهدارنده خود شناور کرده و یا هل دهیم.
نکات مهم
شناور کردن (float) اغلب برای تصاویر استفاده می شود، اما برای کار کردن با layout ها نیز مفید است.
عناصر فقط در جهت محور X می توانند Float شوند ( چپ یا راست )
عناصری که بعد از عنصر float شده آمده است، اطراف آنرا خواهند گرفت.
عناصری که قبل از عنصر float شده آمده است، تأثیری ندارند.
مقادیر صفت کاربردی float در زبان طراحی سی اس اس
صفت کاربردی float که در زبان طراحی CSS1 معرفی شده است، 4 مقدار می پذیرد که عبارتند از:
- مقدار none
- مقدار left
- مقدار right
- مقدار initial
مقدار none درون خاصیت float در زبان سی اس اس
اگر خاصیت float را برابر با مقدار none قرار دهیم، یعنی می خواهیم تگ یا تگ های html مربوطه به هیچ وجه به چپ تگ نگهدارنده شناور یا هل داده نشوند.
مقدار none به عنوان مقدار پیش فرض خاصیت float محسوب می گردد.
مقدار left درون خاصیت float در زبان سی اس اس
اگر خاصیت float را برابر با مقدار left قرار دهیم، یعنی می خواهیم تگ یا تگ های html مربوطه به سمت چپ تگ نگهدارنده شناور یا هل داده شوند.
ویژگی float در css | شناور کردن تگ html به چپ و راست
مقدار right درون خاصیت float در زبان سی اس اس
اگر خاصیت float را برابر با مقدار right قرار دهیم، یعنی می خواهیم تگ یا تگ های html مربوطه به سمت راست تگ نگهدارنده شناور یا هل داده شوند.
اگر یک عکس به سمت راست فشار داده شود، متن زیر آن، سمت چپ آن را خواهد گرفت.
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> <p> <img style="float:right;" src="https://siteamoozi.com/logocss.gif" width="95" height="84" alt="" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> |
ویژگی float در css | شناور کردن تگ html به چپ و راست
خروجی کد در مرورگر اینترنتی
In the paragraph below, we have added an image with style float:right. The result is that the image will float to the right in the paragraph.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
مقدار initial درون خاصیت float در زبان سی اس اس
اگر خاصیت float را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html یا آیتم مورد نظر اعمال می شود.
اگر چندین عنصر float شده را بعد از یکدیگر قرار دهید، در صورت وجود فضای کافی، در نهایت یکی بعد از دیگری قرار خواهند گرفت.
ویژگی float در css | شناور کردن تگ html به چپ و راست
بررسی خاصیت float از نظر نسخه زبان طراحی سی اس اس
خصوصیت float در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.
بررسی ساختاری خصوصیت float
عناوین ساختاری خاصیت float | وضعیت ساختاری خاصیت float |
مقدار پیش فرض | none |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS1 |
سینتکس صفت در جاوا اسکریپت | "object.style.cssFloat="left |
پشتیبانی مرورگرهای اینترنتی از خاصیت float در زبان طراحی سی اس اس
| خاصیت css |  |  |  |  |  |
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
ثبت ديدگاه