مشاهده تصویر بزرگتر

ویژگی float در css

ویژگی float در css | ویژگی float در css | صفت float | خاصیت float در css

در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی -float- در زبان CSS می پردازیم.

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

شناور کردن (float) اغلب برای تصاویر استفاده می شود، اما برای کار کردن با layout ها نیز مفید است. (طرح بندی)

شناور کردن یک عنصر در css چگونه است

عناصر فقط در جهت محور X می توانند Float شوند(چپ یا راست).

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

عناصری که قبل از عنصر float شده آمده است، تأثیری ندارند.

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

;
<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/wp-content/uploads/2018/04/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.

خروجی کد در مرورگر اینترنتی

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.