ویژگی float در css

ویژگی 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 مربوطه به سمت راست تگ نگهدارنده شناور یا هل داده شوند.

اگر یک عکس به سمت راست فشار داده شود، متن زیر آن، سمت چپ آن را خواهد گرفت.

به مثال زیر توجه کنید:

<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>

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.

ویژگی 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 شده را بعد از یکدیگر قرار دهید، در صورت وجود فضای کافی، در نهایت یکی بعد از دیگری قرار خواهند گرفت.