آموزش ویژگی float در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی float در CSS با من همراه باشید.

آموزش ویژگی float در CSS

Free-Learn

ویژگی float در CSS

با استفاده از ویژگی float در CSS میتوان یک یا چندین عنصر / تگ را در یک صفحه وب به سمت راست یا چپ شناور نمود.

بفرض مثال من یک باکس دارم که در این باکس یک تصویر هست و میخوام این تصویر دقیقا در سمت چپ باکس نمایش داده شود، یعنی متن بیاد سمت راست و تصویر بره سمت چپ، پس اینجا میتونیم از ویژگی float استفاده نماییم.

وقتی ما یک تصویر رو در یک باکس شناور میکنیم ، ولی اندازه تصویر از اندازه باکس اصلی بزرگتر باشه، به گونه ای که از باکس اصلی بیرون بزنه، عملا بهش میگیم سَرریز یا Overflow شده، حال برای رفع این مشکل باید از هک clearfix که برای اینکار ایجاد شده استفاده نماییم. ( مثال شماره ۳ )

اگر از ویژگی position با مقدار absolute استفاده کرده باشید، ویژگی float دیگه عمل نخواهد کرد.

وقتی یک عنصر شناور میشود، بصورت خودکار عنصر بعد از خودش را نیز شناور میکند، حال برای جلوگیری از شناور شدن اون عنصر بعدی باید از ویژگی clear استفاده نماییم. ( مثال شماره ۲ )

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی float را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : شناور کردن تصویر به سمت راست

امتحان کنید

مثال شماره ۲ : نحوه استفاده از ویژگی clear جهت جلوگیری از شناور شدن عناصر بعد از عنصر شناور شده

امتحان کنید

مثال شماره ۳ : استفاده از هک clearfix جهت جلوگیری از سرریز شدن یک عنصر

امتحان کنید

مثال شماره ۴ : طرح بندی ساده قالب با استفاده از float + واکنش گرایی

امتحان کنید

مثال شماره ۵ : ایجاد یک قاب برای گالری تصاویر با استفاده از float + واکنش گرایی

امتحان کنید

Free-Learn

جدول مشخصات ویژگی float در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض none
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS1
نحوه استفاده در جاوااسکریپت object.style.cssFloat=”right”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی float در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
float ۱٫۰ ۱٫۰ ۷٫۰ ۱٫۰ ۴٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی float در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
none پیش فرض – یک عنصر به هیچ سمتی شناور نمیشود.
left عنصر به سمت چپ شناور میشود.
right عنصر به سمت راست شناور میشود.
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

اگر عنصر یا تگی را به سمت راست یا چپ شناور میکنید، برای اینکه عناصر بعد از آن نیز شناور نشوند حتما از ویژگی clear استفاده نمایید. ( مثال شماره ۲ )

همانطور که در مثال شماره ۳ مشاهده مینمایید ، برای جلوگیری از سَرریز یا Overflow شدن یک عنصر میتوان از هک clearfix استفاده کرد، استفاده از این تگ پیشنهاد میشه چون هم شناخته شده هست و هم بیشترین سازگاری را با مرورگرهای اینترنتی دارد.

هرچند میتوان با استفاده از ویژگی overflow نیز از سرریز شدن یک عنصر جلوگیری کرد ولی هک clearfix بدلیل شناخته بودنش و سازگاری که با مرورگرهای مدرن دارد پیشنهاد میشود از این هک استفاده نمایید.

مثال از نحوه استفاده ویژگی Overflow برای جلوگیری از سَرریز شدن یک عنصر :

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب